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

1 <! DOCTYPEhtmlPUBLIC " -//W3C//DTDXHTML1.0Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
2 < htmlxmlns = " http://www.w3.org/1999/xhtml " >
3 < head >
4 < metahttp - equiv = " Content-Type " content = " text/html;charset=utf-8 " />
5 < title > JS_array </ title >
6 < scripttype = " 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的htmlDOM对象
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 < tableid = " 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 < inputtype = " button " value = " click " onclick = " testTable(); " />
62 </ p >
63 < p >< br />
64 < inputtype = " button " value = " deleterow " onclick = " deleteRow() " />
65 < br />
66 < inputtype = " button " value = " insertrow " onclick = " insertRow() " />
67 </ p >
68 < p >& nbsp; </ p >
69 </ body >
70 </ html >
71
下图是显示效果