动态添加和删除表格行
Code
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2 <html>
3 <head>
4 <title></title>
5 <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
6 <meta name="ProgId" content="VisualStudio.HTML">
7 <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
8 <script language="javascript">
9 <!--
10 var i=1;
11 function rowAdd()
12 {
13 i=i+1;
14 var oldTable=document.getElementById("myTable");
15 var newTr=oldTable.insertRow(i);
16 var newTd0=newTr.insertCell(0);
17 var newTd1=newTr.insertCell(1);
18
19 newTd0.innerHTML="<INPUT id='" + i +"' type='checkbox' name='" + i + "'>";
20 newTd1.innerText="第" + i + "行";
21
22 newTd0.align="center";
23 }
24 function rowDel()
25 {
26
27 //document.getElementById("myTable").rows(i).removeNode();
28 var cc = document.getElementsByTagName("input");
29 for(var j=0;j<cc.length;j++)
30 {
31 if(cc[j].type=="checkbox")
32 {
33 if(cc[j].checked==true)
34 {
35 if(i>=2)
36 {
37 cc[j].checked=false;
38 cc[j].parentElement.removeNode();
39 cc[j].parentElement.removeNode();//.removeNode();
40 i=i-1;
41 }
42 else
43 {
44 alert("不能继续删减条目!");
45 }
46 //alert("DDD");
47 //var t=document.getElementById("myTable");
48 //t.deleteRow[index];
49 }
50 }
51 }
52
53
54 }
55
56
57 //-->
58 </script>
59 </head>
60 <body>
61
62 <table><tr><td><INPUT id="Button1" type="button" value="添加行" name="Button1" onclick="rowAdd()">
63 <INPUT id="Button2" type="button" value="删除行" name="Button2" onclick="rowDel()"></td></tr></table>
64 <table id="myTable" align="center" border="1" bgcolor="#00ffcc">
65 <tr>
66 <td width="80" height="20" align="center">选择</td>
67 <td width="80" height="20"></td>
68 </tr>
69 <tr>
70 <td width="80" height="20" align="center"><INPUT id="Checkbox1" type="checkbox" name="Checkbox1"></td>
71 <td width="80" height="20"></td>
72 </tr>
73 </table>
74
75 </body>
76 </html>
2 <html>
3 <head>
4 <title></title>
5 <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
6 <meta name="ProgId" content="VisualStudio.HTML">
7 <meta name="Originator" content="Microsoft Visual Studio .NET 7.1">
8 <script language="javascript">
9 <!--
10 var i=1;
11 function rowAdd()
12 {
13 i=i+1;
14 var oldTable=document.getElementById("myTable");
15 var newTr=oldTable.insertRow(i);
16 var newTd0=newTr.insertCell(0);
17 var newTd1=newTr.insertCell(1);
18
19 newTd0.innerHTML="<INPUT id='" + i +"' type='checkbox' name='" + i + "'>";
20 newTd1.innerText="第" + i + "行";
21
22 newTd0.align="center";
23 }
24 function rowDel()
25 {
26
27 //document.getElementById("myTable").rows(i).removeNode();
28 var cc = document.getElementsByTagName("input");
29 for(var j=0;j<cc.length;j++)
30 {
31 if(cc[j].type=="checkbox")
32 {
33 if(cc[j].checked==true)
34 {
35 if(i>=2)
36 {
37 cc[j].checked=false;
38 cc[j].parentElement.removeNode();
39 cc[j].parentElement.removeNode();//.removeNode();
40 i=i-1;
41 }
42 else
43 {
44 alert("不能继续删减条目!");
45 }
46 //alert("DDD");
47 //var t=document.getElementById("myTable");
48 //t.deleteRow[index];
49 }
50 }
51 }
52
53
54 }
55
56
57 //-->
58 </script>
59 </head>
60 <body>
61
62 <table><tr><td><INPUT id="Button1" type="button" value="添加行" name="Button1" onclick="rowAdd()">
63 <INPUT id="Button2" type="button" value="删除行" name="Button2" onclick="rowDel()"></td></tr></table>
64 <table id="myTable" align="center" border="1" bgcolor="#00ffcc">
65 <tr>
66 <td width="80" height="20" align="center">选择</td>
67 <td width="80" height="20"></td>
68 </tr>
69 <tr>
70 <td width="80" height="20" align="center"><INPUT id="Checkbox1" type="checkbox" name="Checkbox1"></td>
71 <td width="80" height="20"></td>
72 </tr>
73 </table>
74
75 </body>
76 </html>
