本文是对上一篇博文的扩展，用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>
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
