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

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

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

页面效果如图：

          

代码如下：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>动态创建元素（表格）</title>
         <script src="common.js" type="text/javascript" charset="utf-8"></script>
     </head>
     <body>
         <!-- 纯JS代码创建表格 -->
         <script type="text/javascript">
             var body=document.getElementsByTagName('body');
             //1.创建盒子作为表格容器,控制表格的位置
             var box=document.createElement('div');
             body[0].appendChild(box);

             //2.创建表格,并与box绑定
             var table=document.createElement('table');
             box.appendChild(table);
             //设置表格样式
             table.style.width='400px';
             table.style.border='1px solid gray';
             table.style.borderCollapse='collapse';

             //3.创建表头,并与table绑定
             var thead=document.createElement('thead');
             table.appendChild(thead);
             //定义表头的行,与表头绑定
             var tr=document.createElement('tr');
             thead.appendChild(tr);

             //4.创建表体,并与table绑定
             var tbody=document.createElement('tbody');
             table.appendChild(tbody);

             //建立模拟数据,模拟数据是一个个存在数组中的对象
             var dates=[
                 {name:'李世民',subject:'语文',score:98},
                 {name:'赵匡胤',subject:'物理',score:99},
                 {name:'多尔衮',subject:'数学',score:92},
                 {name:'嬴政',subject:'英语',score:93},
                 {name:'玄烨',subject:'体育',score:100},
                 {name:'刘彻',subject:'地理',score:94},
                 {name:'刘邦',subject:'历史',score:97},
                 {name:'曹操',subject:'音乐',score:91},
                 {name:'刘备',subject:'政治',score:100},
                 {name:'孙权',subject:'化学',score:90}
             ];

             //建立表头数据,在数组中存放
             var headDates=['姓名','科目','成绩','操作'];

             //5.表头数据的添加
             for(var i=0;i<headDates.length;i++){
                 //定义表头行的列
                 var td=document.createElement('td');
                 td.style.border='1px solid gray';
                 td.style.textAlign='center';
                 td.style.backgroundColor='lightgray';
                 td.style.height='40px';
                 tr.appendChild(td);
                 //设置表头行中列的内容
                 setInnerText(td,headDates[i]);
             }

             //6.表体数据的添加
             for(var i=0;i<dates.length;i++ ){
                 var date=dates[i];
                 //创建表体数据的行与表体绑定
                 var tr=document.createElement('tr');
                 tbody.appendChild(tr);
                 for(var key in date){
                     //创建表体行中的列
                     var td=document.createElement('td');
                     td.style.border='1px solid gray';
                     td.style.textAlign='center';
                     tr.appendChild(td);
                     setInnerText(td,date[key]);
                 }
                 //创建删除列
                 var link=document.createElement('a');
                 link.href='javascript:void(0)';
                 setInnerText(link,'删除');
                 var td=document.createElement('td');
                 td.style.border='1px solid gray';
                 td.appendChild(link);
                 td.style.textAlign='center';
                 tr.appendChild(td);
                 //给删除列注册事件
                 link.onclick=deleteData;
             }

             function deleteData(){
                 var tr=this.parentNode.parentNode;
                 tbody.removeChild(tr);
                 return;
             }
         </script>
     </body>
 </html>