欧美日韩一区在线播放,中文字幕高清在线观看,国产色a在线

隨筆分類

文章分類

Java技術學習 (rss)

收藏夾

隨筆檔案

HTML表格的動態添加行和刪除行

Posted on 2007-05-28 18:11 李鵬閱讀(7839) 評論(2) 編輯收藏所屬分類: javascript

最近由于工作上的需要，
對AJAX的相關知識看的稍多了些，

下面是HTML表格行的動態添加和刪除的例子，
代碼貼上：

1

<html>
2

<head>
3

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 = "  <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下測試通過。

新用戶注冊刷新評論列表


只有注冊用戶登錄后才能發表評論。




網站導航: 博客園 IT新聞 Chat2DB C++博客博問管理

web study

W3School
中文文檔

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

隨筆分類

文章分類

收藏夾

隨筆檔案

最新隨筆

最新評論

HTML表格的動態添加行和刪除行

web study