使用JavaScript动态添加、 删除表格

效果图：



页面代码：

1 <table id="tabBill">
2 <tr>
3 <td colspan="2" align="center">
4 <input id="btnAddOne" onclick="Addtr();" type="button" value="增加项" />
5 <input id="btnRemoveOne" onclick="Removetr();" type="button" value="删尾行" />
6 </td>
7 </tr>
8 <tr>
9 <td>
10 故障代码 <asp:DropDownList ID="ddlFailureCode1" Width="196px" runat="server"/>
11 </td>
12 <td>
13 故障数 <asp:TextBox ID="txtFailureCodeAmount1" runat="server"/>
14 </td>
15 </tr>
16 </table>

JavaScript代码：

1 <script type="text/javascript" language="javascript">
2 var i=1;
3 var sub=true;
4
5 //添加行方法
6 function Addtr(){
7 i = tabBill.rows.length;
8 var ii = tabBill.rows.length;
9 var newTr = tabBill.insertRow(-1);
10 var newTd1= newTr.insertCell(-1);
11 var newTd2 = newTr.insertCell(-1);
12 //设置列内容和属性
13 newTd1.innerHTML = "故障代码 <select id='ddlFailureCode" + ii + "' style='width:196px'></select>";
14 newTd2.innerHTML = "故障数 <input type='text' id='txtFailureCodeAmount" + ii + "' class='tbStyle'/>";
15 AddOptions();
16 }
17
18 //删除行方法
19 function Removetr(){
20 if (tabBill.rows.length > 2)
21 {
22 tabBill.deleteRow(tabBill.rows.length - 1);
23 i--;
24 }
25 }
26
27 //添加选项
28 function AddOptions(){
29 var options = document.getElementById("ddlFailureCode1").options;
30 for (var m = 0; m < options.length; m++) {
31 var newOption = new Option(options[m].innerText, options[m].value);
32 document.getElementById("ddlFailureCode" + i).add(newOption);
33 }
34 }
35
36 //获取表单里面的值
37 function SaveHF(){
38 var subStr = "";
39 var count = tabBill.rows.length-1;
40 for (var n =1; n <= count; n++) {
41 var failureCode = document.getElementById("ddlFailureCode"+n).value;
42 var failureCodeAmount = document.getElementById("txtFailureCodeAmount"+n).value;
43 subStr += failureCode + "|" + failureCodeAmount+ "~";
44 }
45 //使用表单域保存得到的数据,"hfvalues"为表单域的ID
46 document.getElementById("hfvalues").value = subStr;
47 }
48 </script>