表格添加、删除
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>无标题文档</title>
6 <script>
7 window.onload=function ()
8 {
9 var oTab=document.getElementById(‘tab1‘);
10
11 var oBtn=document.getElementById(‘btn1‘);
12 var oName=document.getElementById(‘name‘);
13 var oAge=document.getElementById(‘age‘);
14 var id=oTab.tBodies[0].rows.length+1;
15
16 oBtn.onclick=function ()
17 {
18 var oTr=document.createElement(‘tr‘);
19
20 var oTd=document.createElement(‘td‘);
21 oTd.innerHTML=id++; //?
22 oTr.appendChild(oTd);
23
24 var oTd=document.createElement(‘td‘);
25 oTd.innerHTML=oName.value;
26 oTr.appendChild(oTd);
27
28 var oTd=document.createElement(‘td‘);
29 oTd.innerHTML=oAge.value;
30 oTr.appendChild(oTd);
31
32 var oTd=document.createElement(‘td‘);
33 oTd.innerHTML=‘<a href="javascript:;">删除</a>‘;
34 oTr.appendChild(oTd);
35
36 oTd.getElementsByTagName(‘a‘)[0].onclick=function ()
37 {
38 oTab.tBodies[0].removeChild(this.parentNode.parentNode);
39 };
40
41 oTab.tBodies[0].appendChild(oTr);
42 };
43 };
44 </script>
45 </head>
46
47 <body>
48 姓名：<input id="name" type="text" />
49 年龄：<input id="age" type="text" />
50 <input id="btn1" type="button" value="添加" />
51 <table id="tab1" border="1" width="500">
52 <thead>
53 <td>ID</td>
54 <td>姓名</td>
55 <td>年龄</td>
56 <td>操作</td>
57 </thead>
58 <tbody>
59 <tr>
60 <td>1</td>
61 <td>Blue</td>
62 <td>27</td>
63 <td></td>
64 </tr>
65 <tr>
66 <td>2</td>
67 <td>张三</td>
68 <td>23</td>
69 <td></td>
70 </tr>
71 <tr>
72 <td>3</td>
73 <td>李四</td>
74 <td>28</td>
75 <td></td>
76 </tr>
77 <tr>
78 <td>4</td>
79 <td>王五</td>
80 <td>25</td>
81 <td></td>
82 </tr>
83 <tr>
84 <td>5</td>
85 <td>张伟</td>
86 <td>24</td>
87 <td></td>
88 </tr>
89 </tbody>
90 </table>
91 </body>
92 </html>
时间： 2024-08-30 03:19:16