思路：
代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>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><script>//1.创建对象var datas = [{name: '辉辉',sybject: 'javascript',score: 72}, {name: '张华',sybject: 'javascript',score: 92}, {name: '小力钟',sybject: 'javascript',score: 86}, {name: '明与',sybject: 'javascript',score: 100}];//2.往tobdy中创建行var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) { //外面的for循环行//创建tr行var tr = document.createElement('tr');tbody.appendChild(tr);//里面创建的单元格(跟数据有关系) td 取决于每个对象里面的属性个数for (var k in datas[i]) { //里面的for循环列 tdvar td = document.createElement('td');//把对象里面的属性值 给tdtd.innerHTML = datas[i][k];tr.appendChild(td);}//3.创建有删除2个字的单元格 一定要创建新的td不然会把之前最后一个数据覆盖掉!!var td = document.createElement('td');td.innerHTML = '<a href = "javascript:;">删除</a>';tr.appendChild(td);}//4.删除操作开始var as = document.querySelectorAll('a');for (var i = 0; i <as.length; i++) {as[i].onclick = function() {//点击a删除当前a所在的行 (链接的爸爸的爸爸)tbody.removeChild(this.parentNode.parentNode);}}</script>
</body>
</html>主要是运用了节点操作和操作元素相关的知识
