使用Javascript动态增加,删除表格(使用W3C对象模型)
使用Javascript动态增加,删除表格(使用W3C对象模型) <html>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8"?/>
<head>
<script?language="javascript">
??function?deleteRow(index){
????var?tableObj=document.getElementById("mainBody");
????var?rowObj=document.getElementById('row'+index);
????tableObj.removeChild(rowObj);
??}
??function?addRow(){
?????var?tableObj=document.getElementById("mytable");
?????var?tableBodyObj=document.getElementById("mainBody");
?????var?newRowObj=document.createElement("tr");
?????newRowObj.id="row"+(tableObj.rows.length-1);
?????
?????var?newColName=document.createElement("td");
?????var?newColAge=document.createElement("td");
?????var?newColButton=document.createElement("td");
?????
?????newColName.innerHTML=document.getElementById("newName").value;
?????newColAge.innerHTML=document.getElementById("newAge").value;
?????newColButton.innerHTML='<input?type="button"?value="删除"?onclick="deleteRow('+(tableObj.rows.length-1)+')">';?
?????
?????newRowObj.appendChild(newColName);
?????newRowObj.appendChild(newColAge);
?????newRowObj.appendChild(newColButton);
?????
?????tableBodyObj.appendChild(newRowObj);
?????
??}
</script>
</head>
<body>
<table?width="100%"?id="mytable"?border="0"?cellspacing="0"?cellpadding="0">
?<tbody?id="mainBody">
??<tr>
????<td>姓名</td>
????<td>年龄</td>
????<td>操作</td>
??</tr>
??<tr?id="row0">
????<td>gaoxiang</td>
????<td>28</td>
????<td><input?type="button"?onclick="deleteRow(0)"?value="删除"/></td>
??</tr>
???<tr?id="row1">
????<td>gaoxiang</td>
????<td>28</td>
????<td><input?type="button"?onclick="deleteRow(1)"?value="删除"/></td>
??</tr>
??</tbody>
</table>
<input?type="text"?name="name"?id="newName"?/>
<input?type="text"?name="age"?id="newAge"/>
<input?type="button"?onclick="addRow();"??value="新增"/>
</body>
</html>
<script?language="javascript">
??function?deleteRow(index){