使用JS对表格中的行进行增删

1 <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
 2 < html xmlns = " http://www.w3.org/1999/xhtml " >
 3 < head >
 4 < meta http - equiv = " Content-Type "  content = " text/html; charset=utf-8 "   />
 5 < title > JS_array </ title >
 6 < script type = " text/javascript " >
 7      function  printArray() {
 8          var  arr  =   new  Array() ;
 9         arr[ 0 ]  =   " One "  ;
10         arr[ 1 ]  =   " Two "  ;
11         arr[ 5 ]  =   " Five "  ;
12          for (i = 0 ; i < arr.length; i ++ ) {
13             alert(arr[i]) ;
14         }
15     }
16
17      function  testTable() {
18          var  t1  =  document.getElementById('t1') ;   // 返回指定ID的 html DOM 对象
19          var  rows  =  t1.rows;
20         alert(rows.length) ;
21         alert(rows[ 1 ].cells[ 0 ].innerHTML) ;
22     }
23      function  deleteRow() {  // 删除最后一行
24          var  t1  =  document.getElementById('t1') ;
25          var  rows  =  t1.rows ;
26         t1.deleteRow(rows.length - 1 ) ;
27     }
28      function  insertRow() {  // 在最后一行添加一行
29          var  t1  =  document.getElementById('t1') ;
30          var  rows  =  t1.rows ;
31          var  newRow  =  t1.insertRow(rows.length) ;
32         newRow.insertCell( 0 ).innerHTML  =   " 11&nbsp; "  ;
33         newRow.insertCell( 1 ).innerHTML  =   " 31&nbsp; "  ;
34     }
35
36 </ script >
37 </ head >
38
39 < body >
40
41 < table id = " t1 "  width = " 200 "  border = " 1 "  cellspacing = " 0 "  cellpadding = " 0 " >
42    < tr >
43      < td > 0 , 0 </ td >
44      < td >& nbsp; </ td >
45    </ tr >
46    < tr >
47      < td > 1 , 0 </ td >
48      < td >& nbsp; </ td >
49    </ tr >
50    < tr >
51      < td > 2 , 0 </ td >
52      < td >& nbsp; </ td >
53    </ tr >
54    < tr >
55      < td > 3 , 0 </ td >
56      < td >& nbsp; </ td >
57    </ tr >
58 </ table >
59 < p >& nbsp; </ p >
60 < p >
61    < input type = " button "  value = " click "  onclick = " testTable(); "    />
62 </ p >
63 < p >< br  />
64    < input type = " button "  value = " delete row "  onclick = " deleteRow() "   />  
65    < br  />
66    < input type = " button "  value = " insert row "  onclick = " insertRow() "   />
67 </ p >
68 < p >& nbsp; </ p >
69 </ body >
70 </ html >
71
下图是显示效果