HTML表格的动态添加行和删除行

Posted on 2007-05-28 18:11 李鹏 阅读(7820) 评论(2)  编辑  收藏 所属分类: javascript

 

最近由于工作上的需要，
对AJAX的相关知识看的稍多了些，

下面是HTML表格行的动态添加和删除的例子，
代码贴上：

 1<html>
 2<head>
 3 <script language="javascript">
 4  function addRow() { //insert row
 5     var testTable = document.getElementById("testTable");
 6     var bodies = testTable.tBodies;
 7     var aBody = null;
 8     if(bodies){
 9     aBody = bodies[0];
10     }
11
12     if(aBody){
13     var row = document.createElement("tr");
14     for(var i = 0 ; i < testTable.tHead.rows[0].cells.length; i++){
15     var cell = document.createElement("td");
16     
17     var str = "内容第" + (aBody.rows.length + 1) + "行第" + (i+1) + "列";
18     if(i == (testTable.tHead.rows[0].cells.length -1)) {
19         str = "&nbsp;&nbsp;<a href='javascript:void(0);' onclick=\"removeRow(this);\">删除</a>";
20     }
21     cell.innerHTML = str;
22     row.appendChild(cell);
23     }
24     aBody.insertBefore(row);
25     }
26  }
27
28  function removeRow(obj) { //delete row
29     var testTable = document.getElementById("testTable");
30     var bodies = testTable.tBodies;
31     var aBody = null;
32     if(bodies){
33     aBody = bodies[0];
34     if(aBody){
35                 aBody.removeChild(obj.parentNode.parentNode);
36        }
37     }
38  }
39 </script>
40</head>
41   <body>
42      <div>
43         <table id="testTable" border="1" width="80%">
44      <thead>
45    <tr>
46       <th scope="col">表头第一列</th>
47       <th scope="col">表头第二列</th>
48       <th scope="col">表头第三列</th>
49    </tr>
50   </thead>
51         </table>
52   <input type="button" name="addButton" value="追加一行" onclick="addRow();" />
53      </div>
54   </body>
55</html>
56

由于公司只需要是IE下能执行就满足要求，
因此以上代码只是在IE下测试通过。

只有注册用户登录后才能发表评论。
网站导航:
 

posts - 8, comments - 28, trackbacks - 0, articles - 0

Copyright © 李鹏