动态添加和删除表格行

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>
posted @ 2006-04-05 13:45  行进中开火  阅读(377)  评论(0编辑  收藏  举报