本文實(shí)例為大家分享了js動(dòng)態(tài)實(shí)現(xiàn)表格添加和刪除的具體代碼，供大家參考，具體內(nèi)容如下
運(yùn)行效果如圖（兩種實(shí)現(xiàn)方案，被注釋的是第一種實(shí)現(xiàn)方案）
代碼：
|
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="請輸入編號(hào)" /> <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;">學(xué)生信息表</caption> <tr> <th>編號(hào)</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"> // 當(dāng)點(diǎn)擊添加按鈕時(shí)觸發(fā)下面的方法 document.getElementById("add").onclick=function(){ // 獲取每個(gè)文本框中的內(nèi)容 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的方法動(dòng)態(tài)添加表格 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> |
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/weixin_43582611/article/details/102919798
