码迷,mamicode.com
首页 > 其他好文 > 详细

10-表格添加、删除

时间:2017-11-09 22:50:27      阅读:345      评论:0      收藏:0      [点我收藏+]

标签:this   ntb   func   年龄   oct   set   back   document   cti   

表格添加、删除

 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-表格添加、删除

标签:this   ntb   func   年龄   oct   set   back   document   cti   

原文地址:http://www.cnblogs.com/liuxuanhang/p/7811249.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!