10-表格添加删除

Posted 刘选航

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了10-表格添加删除相关的知识,希望对你有一定的参考价值。

表格添加、删除

 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>

 

以上是关于10-表格添加删除的主要内容,如果未能解决你的问题,请参考以下文章

10-表格添加删除

替换或删除后台堆栈上现有片段的代码不起作用

javascript添加或者删除table表格行代码实例

无法从布局中删除视图

如何在按钮单击时添加/删除片段?

ViewPager2 无法动态添加删除片段