本文實例為大家分享了js動態實現表格添加和刪除的具體代碼，供大家參考，具體內容如下
運行效果如圖（兩種實現方案，被注釋的是第一種實現方案）
代碼：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> div{ text-align:center; box-sizing: border-box; width:100%; } #div1{ margin-left: 300px; width: 800px; margin-top: 50px; } #div2{ margin-left: 300px; width: 800px; padding-top:50px; } #table_id{ width: 580px; } </style> <body> <div id="div0"> <div id="div1"> <input type="text" id="userid" placeholder="請輸入編號" /> <input type="text" id="username" placeholder="請輸入姓名" /> <input type="text" id="gender" placeholder="請輸入性別" /> <input type="button" value="添加" id="add"/> </div> <div id="div2"> <table border="1px" align="center" id="table_id"> <caption style="font: '微軟雅黑';font-size:20px;">學生信息表</caption> <tr> <th>編號</th> <th>姓名</th> <th>性別</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐沖</td> <td>張無忌</td> <td><input type="button" value="刪除" style="color: blue;" onclick="delTr(this)"/></td> </tr> <tr> <td>1</td> <td>令狐沖</td> <td>張無忌</td> <td><input type="button" value="刪除" style="color: blue;" onclick="delTr(this)" /></td> </tr> <tr> <td>1</td> <td>令狐沖</td> <td>張無忌</td> <td><input type="button" value="刪除"style="color: blue;" onclick="delTr(this)"/></td> </tr> </table> </div> </div> </body> <script type="text/javascript"> // 當點擊添加按鈕時觸發下面的方法 document.getElementById("add").onclick=function(){ // 獲取每個文本框中的內容 var id = document.getElementById("userid").value; var name = document.getElementById("username").value; var gender = document.getElementById("gender").value; /* // 添加id var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); // 添加username var td_username = document.createElement("td"); var text_username = document.createTextNode(name); td_username.appendChild(text_username); // 添加gender var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); // 添加按鈕 var td_button = document.createElement("td"); var ele_input = document.createElement("input"); ele_input.setAttribute("type","button"); ele_input.setAttribute("value","刪除"); ele_input.setAttribute("onclick","delTr(this)"); ele_input.style.color="blue"; td_button.appendChild(ele_input); var ele_tr = document.createElement("tr"); ele_tr.appendChild(td_id); ele_tr.appendChild(td_username); ele_tr.appendChild(td_gender); ele_tr.appendChild(td_button); var ele_table = document.getElementsByTagName("table")[0]; ele_table.appendChild(ele_tr);*/ // 使用innerHtml的方法動態添加表格 var tab = document.getElementsByTagName("table")[0]; tab.innerHTML+="<tr>\n"+ "<td>"+id+"</td>\n"+ "<td>"+name+"</td>"+ "<td>"+gender+"</td>"+ "<td><input type='button' value='刪除' onclick='delTr(this)' style='color:blue'/></td>"+ "</tr>" } function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script></html> |
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
原文鏈接：https://blog.csdn.net/weixin_43582611/article/details/102919798
