js动态生成表格(节点操作)
这篇文章主要为大家详细介绍了js动态生成表格,进行节点操作,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js动态生成表格的具体代码,供大家参考,具体内容如下
针对DOM节点操作,该案例效果图如下(代码量不多,就没有结构与行为相分离):
原生js实现(注释里面解释了做法):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title ></ title > < style type = "text/css" > table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } td, th { border: 1px solid #333; } thead tr { height: 40px; background-color: #ccc; } </ style > </ head > < body > < table cellspacing = "0" > < thead > < tr > < th >姓名</ th > < th >科目</ th > < th >成绩</ th > < th >操作</ th > </ tr > </ thead > < tbody > </ tbody > </ table > </ body > < script type = "text/javascript" > //因为里面的学生数据都是动态的,我们需要js动态生成 这里我们需要模拟数据,自己定义好数据 // 数据我们采取对象形式储存 //1 先准备好学生的数据 //2 所有数据都是放到tbody里面(多少人,多少行) var datas = [{ name: '刘舒新', subject: 'JavaScript', score: '100' }, { name: '宋祥隆', subject: 'JavaScript', score: '80' }, { name: '崔健', subject: 'JavaScript', score: '90' }, { name: '郄海淼', subject: 'JavaScript', score: '70' } ]; //console.log(datas.length); var tbody = document.querySelector('tbody'); for (var i = 0; i < datas.length ; i++) { //创建行 trs = document .createElement('tr'); tbody.appendChild(trs); //创建单元格 td的数量取决于每个对象里面的属性个数 for(var k in datas[i]){ //创建单元格 var td = document .createElement('td'); //把对象里面的属性值 给td //console.log(datas[i][k]); td.innerHTML = datas [i][k]; trs.appendChild(td); } //创建操作删除单元格 var td = document .createElement('td'); td.innerHTML='<a href = "javascript:;" rel = "external nofollow" >删除</ a >' trs.appendChild(td); } //删除操作 var a=document.querySelectorAll('a'); for(var i=0;i< a.length ;i++){ a[i] .onclick = function (){ tbody.removeChild(this.parentNode.parentNode); } } </script> </ html > |
以上就是本文的全部内容,希望对大家的学习有所帮助