js动态生成表格 @Draven
效果预览html部分css部分js部分表格内容使用js生成
效果预览
html部分
<table border="1px" cellspacing="0" cellpadding="10"><thead><tr style="background-color: #999999; height: 60px"><td>姓名</td><td style="width: 150px">科目</td><td>成绩</td><td>操作</td></tr></thead><tbody></tbody></table>
css部分
<style>table {text-align: center;}</style>
js部分
<script>//准备好学生的数据var dates = [{name: '吴彦祖',subject: 'javaScript',score: 100},{name: '孔智超',subject: 'javaScript',score: 80},{name: '栗志青',subject: 'javaScript',score: 60},{name: '姚小煜',subject: 'javaScript',score: 40}]//先获取tbodyvar tbody = document.querySelector('tbody')for (var i = 0; i < dates.length; i++) {//创建tr元素var tr = document.createElement('tr')tbody.appendChild(tr)//给行里面添加tdfor (var k in dates[i]) {var td = document.createElement('td')//给td添加内容for (var s in dates[i]) {td.innerHTML = dates[i][k]}tr.appendChild(td)}//创建删除单元格var td = document.createElement('td')td.innerHTML = "<a href='javascript:;'>删除</a>"tr.appendChild(td)}var as = document.querySelectorAll('a')for (var j = 0; j < as.length; j++) {//获取删除链接as[j].onclick = function () {//删除节点tbody.removeChild(this.parentNode.parentNode)}}</script>
