父窗體html文檔：
<html>
<head>
<title>學生管理</title>
<link rel=”stylesheet” type=”text/css” href=”css/table.css” />
<script language=”javascript” type=”text/javascript”>
//添加學生信息 addStuInfo
function addStuInfo(){
//調用模式窗體，在模式窗體中輸入學生的信息，然後傳遞給父窗體。
var result = window.showModalDialog(“addinfo.html”, , “dialogwidth:800px;dialogheight:300px”);//result接收的就是一個數組對象
//alert(result: + result[0]); //輸出返回值,result返回的不是一個字符串,而是一個數組
//////////////////////////下面用於判斷模式add頁面中所有框都為空時，不用在主窗體中執行加一行操作
var flag = 0;
for (i in result) {
if (result[i].match(/^s*$/)) {
flag++;
alert(flag + “:” + result[i]);
}
}
if (flag == 4) return false;
//////////////////////////
//獲取模式窗體的數據
if (result != null || result != undefined) {//
//alert( result:+result[0] );//輸出返回值數組中的第一個值
addRow( result,document.getElementById( “myTable” ) );//向addRow方法中傳兩個參數，一個為返回的結果，一個為要操作的table
}
}
//在當前的表中添加一行數據
function addRow( result,myTable ){
//alert( myTable );
//tbody
var tbody = document.createElement( “tbody” );//每次有一次條新的記錄，就加入一個tbody標簽到table中,tbody中可能加多個tr
var tr = document.createElement( “tr” );//創建一個tr標簽
//添加4個td,
for( i = 0; i < result.length;i++ ){//根據結果創建相應數目的td
td = document.createElement( td );
td.innerHTML = result[i];//對td進行賦值
//add
tr.appendChild( td );//將td添加到tr的後面
}
//add
tbody.appendChild( tr );//將tr添加到tbody的後面
myTable.appendChild(tbody); //將建好的tbody添加到要顯示的的表格中,
//以上其實就在通過document對象創建html的過程
//註冊事件 ——————//給每次創建的tr行建立事件觸發器
tr. = function(){//////////////////////////////////////////////////鼠標移上時
tr.style.backgroundColor = “#abcdef”;//背景顏色
tr.title = “單擊可進行修改!”;//提示信息
};
tr. = function(){//////////////////////////////////////////////鼠標釋放後
tr.style.backgroundColor = “”;
};
//註冊單擊事件
tr.onclick = function(){/////////////////////////////////////////////////////////鼠標單擊時
//alert();
//把當前選中的數據傳遞給模式窗體，在模式窗體中顯示當前行數據, 單元格集合 cells
//alert( tr.cells[0].innerHTML );
var array = new Array(5);//建立臨時的數組存放要傳給模式對話框的數據
for( i = 0; i < tr.cells.length; i++ ){
array[i] = tr.cells[i].innerHTML;//選中行的單元格中的內容放入臨時數組
}
//alert( array[2] );
array[4] = tr;//把當前行對像傳遞給模式窗體，修改數據時直接通過模式窗體修改tr中的td
//調用模式窗體，修改數據
window.showModalDialog( “addinfo.html”,array,”dialogwidth:800px;dialogheight:300px” );
};
}
</script>
</head>
<body>
<center>
<hr>
<form>
<table border=”3″ id=”myTable”>
<caption>學生信息管理</caption>
<tr>
<td ><input type=”button” value=”添加” onClick=”addStuInfo()”/>
<input type=”button” value=”刪除” />
</td>
</tr>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>性別</th>
<th>學校</th>
<th>是否刪除</th>
</tr>
</table>
</form>
</center>
</body>
</html>
添加子窗體html文檔:
<html>
<head>
<title>添加學生信息</title>
<link rel=”stylesheet” type=”text/css” href=”css/table.css” />
<script language=”javascript” type=”text/javascript”>
var obj = null;
//傳遞當前表單的數據給父窗體
function addInfo(){
if( !obj ){//obj為空時
var array = new Array();
array[0] = document.getElementById( “stuName” ).value;
array[1] = document.getElementById( “stuAge” ).value;
array[2] = document.getElementById( “stuSex” ).value;
array[3] = document.getElementById( “stuSchool” ).value;
//返回給父窗體
window.returnValue = array;
}else{//直接修改父窗體中的tr
obj.cells[0].innerHTML = document.getElementById( “stuName” ).value;
obj.cells[1].innerHTML = document.getElementById( “stuAge” ).value;
obj.cells[2].innerHTML = document.getElementById( “stuSex” ).value;
obj.cells[3].innerHTML = document.getElementById( “stuSchool” ).value;
}
//關閉當前模式窗體
window.close();
}
//獲取父窗體傳遞的數據。
function showInfo(){
//alert();
//獲取父窗體中的數據
var array = window.dialogArguments;
alert( array.length );//打印父窗體傳過來的數據的長度
if (array.length > 0) {//如果父窗體傳瞭數據過來，將調用修改
document.getElementById( “stuName” ).value = array[0];
document.getElementById( “stuAge” ).value = array[1];
document.getElementById( “stuSex” ).value = array[2];
document.getElementById( “stuSchool” ).value = array[3];
obj = array[4];//父窗體中的tr對像
}
}
</script>
</head>
<body onLoad=”showInfo()”>
<center>
<hr>
<form>
<table border=”1″>
<caption>添加學生信息</caption>
<tr>
<td>姓名</td>
<td><input type=”text” id=”stuName”/></td>
</tr>
<tr>
<td>年齡</td>
<td><input type=”text” id=”stuAge”/></td>
</tr>
<tr>
<td>性別</td>
<td><input type=”text” id=”stuSex”/></td>
</tr>
<tr>
<td>學校</td>
<td><input type=”text” id=”stuSchool”/></td>
</tr>
<tr>
<td>操作</td>
<td><input type=”button” value=”確定” onClick=”addInfo()” />
<input type=”button” value=”關閉” onClick=”window.close()” />
</td>
</tr>
</table>
</form>
</center>
</body>
</html>