<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box table thead { background-color: lightgray; } #box table { border-collapse: collapse; text-align: center; border: 1px solid black; width: 300px; } #box table tr, #box table th { border: 1px solid black; } </style> </head> <body> <div id="box"></div> <script> // 表数据 datas = [{name: 'zs', sub: '语文', score: 100}, {name: 'ls', sub: '数学', score: 90}, {name: 'ww', sub: '语文', score: 100} ]; // 表头数据 var dataHeads = ['姓名', '科目', '成绩', '操作']; var box = document.getElementById('box'); // 1，创建table元素 var table = document.createElement('table'); box.appendChild(table); // 2，创建表头 var thead = document.createElement('thead'); table.appendChild(thead); var tr = document.createElement('tr'); thead.appendChild(tr); // 创建表头内容 for (var i=0; i < dataHeads.length; i++) { var th = document.createElement('th'); tr.appendChild(th); th.innerText = dataHeads[i]; } var tbody = document.createElement('tbody'); table.appendChild(tbody); // 创建表格 for (var i=0; i < datas.length; i++) { data = datas[i]; tr = document.createElement('tr'); tbody.appendChild(tr); for (var key in data) { th = document.createElement('th'); tr.appendChild(th); th.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 = linkDelete; function linkDelete() { // 获取父节点 var tr = this.parentNode.parentNode; tbody.removeChild(tr); // 取消a的超链接 return false; } } </script> </body> </html>