动态添加和删除表格行

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 >

转载于:https://www.cnblogs.com/jacklaw/archive/2006/04/05/367448.html