动态创建表格 · JavaScript

``` <style> #box table { border-collapse: collapse; } </style> </head> <body> <div id="box"> </div> <script> var datas = [ {name: '张三', subject: '语文', score: 90,}, {name: '李四', subject: '数学', score: 84,}, {name: '王五', subject: '英语', score: 93,}, {name: '赵六', subject: '语文', score: 60,}, {name: '貂蝉', subject: '数学', score: 55,}, ]; function $(id) { return document.getElementById(id); } //表头数据 var headData = ['姓名', '科目', '成绩', '操作']; var box = $('box'); //创建table var table = document.createElement('table'); box.appendChild(table); table.border = '1px'; table.width = '400px'; //创建表头 var thead = document.createElement('thead'); table.appendChild(thead); var tr = document.createElement('tr'); thead.appendChild(tr); tr.style.height = '40px'; tr.style.backgroundColor = 'skyblue'; for (let i = 0; i < headData.length; i++) { var th = document.createElement('th'); tr.appendChild(th); th.innerText = headData[i]; } //创建数据行 var tbody = document.createElement('tbody'); table.appendChild(tbody); tbody.style.textAlign = 'center'; for (let i = 0; i < datas.length; i++) { //一个学生的成绩 var data = datas[i]; tr = document.createElement('tr'); tbody.appendChild(tr); for (var key in data) { var td = document.createElement('td'); tr.appendChild(td); td.innerText = data[key]; } //生成删除的对应列 td = document.createElement('td'); tr.appendChild(td); //删除的超链接 var link = document.createElement('a'); td.appendChild(link); link.href = 'javascript:void(0)'; link.innerText = '删除'; link.onclick = fn; } function fn() { //获取当前按钮所在的行 var tr = this.parentNode.parentNode; //获取父元素 table.lastElementChild.removeChild(tr); return false; } </script> ```