1。通过表格对象的insertRow方法在表格中插入行。
2。通过行对象的deleteCell方法可以删除行中的表格元素。
3。通过表格对象的deteleRow方法可以删除表格中的行。
源码：
![]()
![]()
Code
1 <html>
2 <head>
3
4 <script language=javascript>
5 function addRow()
6 {
7 var tableObj = document.getElementById("mainTb");
8 var newRowObj = tableObj.insertRow(tableObj.rows.length);
9 var newNameCell = newRowObj.insertCell(newRowObj.cells.length);
10 var newCompanyCell = newRowObj.insertCell(newRowObj.cells.length);
11 var newButtonCell = newRowObj.insertCell(newRowObj.cells.length);
12 newNameCell.innerHTML = document.getElementById("newName").value;
13 newCompanyCell.innerHTML = document.getElementById("newCompany").value;
14 newButtonCell.innerHTML = '<input type="button" value="删除" onclick="deleteRow('+(tableObj.rows.length - 1)+')" >';
15 document.getElementById("test").value = document.getElementById("test").value+newNameCell.innerHTML;
16
17 }
18
19 function deleteRow(index)
20 {
21 var tableObj = document.getElementById("mainTb");
22 tableObj.deleteRow(index);
23 }
24
25 </script>
26
27 </head>
28 <body style="margin:40px">
29 <table id="mainTb" border="1" name="mainTb">
30 <tr><th width="80px">姓名</th><th width="250px">单位</th></tr>
31 <tr id="row0"><td>张三</td><td>北京中软科技公司1</td>
32 <td><input type="button" value="删除" onClick="deleteRow(1)"></td></tr>
33
34
35 <tr id="row1"><td>李四</td><td>北京中软科技公司2</td>
36 <td><input type="button" value="删除" onClick=" deleteRow(2)"></td></tr>
37
38 </tabel><br>
39 <div>
40 <span id="new">
41 姓名：<input type="text" name="newName" id="newName"><br>
42 单位：<input type="text" name="newCompany" id="newCompany">
43 <input type="button" value="新增" onClick="addRow()">
44 </span>
45 </div>
46 </body>
47
48 </html>
效果
姓名：
单位：
Code
浙公网安备 33010602011771号