JavaScript--动态添加元素（纯js书写table并删除数据）

最新推荐文章于 2024-08-31 16:32:57 发布

de7439

最新推荐文章于 2024-08-31 16:32:57 发布

阅读量1.6k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/WangYujie1994/p/10243412.html

版权

本文是对上一篇博文的扩展，用js书写表格，并添加和删除数据，详细代码解释见代码页。

对于文中使用的script脚本函数，下载地址如下：https://pan.baidu.com/s/13OFnj7ncOie_X797hBZtyQ

页面效果如图：

代码如下：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>动态创建元素（表格）</title>
 6         <script src="common.js" type="text/javascript" charset="utf-8"></script>
 7     </head>
 8     <body>
 9         <!-- 纯JS代码创建表格 -->
10         <script type="text/javascript">
11             var body=document.getElementsByTagName('body');
12             //1.创建盒子作为表格容器,控制表格的位置
13             var box=document.createElement('div');
14             body[0].appendChild(box);
15             
16             //2.创建表格,并与box绑定
17             var table=document.createElement('table');
18             box.appendChild(table);
19             //设置表格样式
20             table.style.width='400px';
21             table.style.border='1px solid gray';
22             table.style.borderCollapse='collapse';
23             
24             //3.创建表头,并与table绑定
25             var thead=document.createElement('thead');
26             table.appendChild(thead);
27             //定义表头的行,与表头绑定
28             var tr=document.createElement('tr');
29             thead.appendChild(tr);
30             
31             //4.创建表体,并与table绑定
32             var tbody=document.createElement('tbody');
33             table.appendChild(tbody);
34             
35             //建立模拟数据,模拟数据是一个个存在数组中的对象
36             var dates=[
37                 {name:'李世民',subject:'语文',score:98},
38                 {name:'赵匡胤',subject:'物理',score:99},
39                 {name:'多尔衮',subject:'数学',score:92},
40                 {name:'嬴政',subject:'英语',score:93},
41                 {name:'玄烨',subject:'体育',score:100},
42                 {name:'刘彻',subject:'地理',score:94},
43                 {name:'刘邦',subject:'历史',score:97},
44                 {name:'曹操',subject:'音乐',score:91},
45                 {name:'刘备',subject:'政治',score:100},
46                 {name:'孙权',subject:'化学',score:90}
47             ];
48             
49             //建立表头数据,在数组中存放
50             var headDates=['姓名','科目','成绩','操作'];
51             
52             //5.表头数据的添加
53             for(var i=0;i<headDates.length;i++){
54                 //定义表头行的列
55                 var td=document.createElement('td');
56                 td.style.border='1px solid gray';
57                 td.style.textAlign='center';
58                 td.style.backgroundColor='lightgray';
59                 td.style.height='40px';
60                 tr.appendChild(td);
61                 //设置表头行中列的内容
62                 setInnerText(td,headDates[i]);
63             }
64             
65             //6.表体数据的添加
66             for(var i=0;i<dates.length;i++ ){
67                 var date=dates[i];
68                 //创建表体数据的行与表体绑定
69                 var tr=document.createElement('tr');
70                 tbody.appendChild(tr);
71                 for(var key in date){
72                     //创建表体行中的列
73                     var td=document.createElement('td');
74                     td.style.border='1px solid gray';
75                     td.style.textAlign='center';
76                     tr.appendChild(td);
77                     setInnerText(td,date[key]);
78                 }
79                 //创建删除列
80                 var link=document.createElement('a');
81                 link.href='javascript:void(0)';
82                 setInnerText(link,'删除');
83                 var td=document.createElement('td');
84                 td.style.border='1px solid gray';
85                 td.appendChild(link);
86                 td.style.textAlign='center';
87                 tr.appendChild(td);
88                 //给删除列注册事件
89                 link.οnclick=deleteData;
90             }
91             
92             function deleteData(){
93                 var tr=this.parentNode.parentNode;
94                 tbody.removeChild(tr);
95                 return;
96             }
97         </script>
98     </body>
99 </html>