1、因为里面的数据都是动态的，需要JS来动态生成 ，数据采取对象形式存储
2、所有的数据都是放在tbody行里面
3、创建的行数对应多少人，用数组的长度来获取
<!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 {
border-collapse: 0px;
border-spacing: 0px;
width: 300px;
height: auto;
text-align: center;
border: 0.5px solid black
}
thead {
font-weight: bold;
background-color: grey;
}
td {
border: 0.5px solid black;
}
</style>
<body>
<table>
<thead>
<td>姓名</td>
<td>科目</td>
<td>成绩</td>
<td>操作</td>
</thead>
<tbody>
</tbody>
</table>
<script>
//通过对象存储信息,数组里面可以存放多个数据，一个数据就是一个对象
var datas = [{
name: '卫英络',
subject: 'javascript',
score: 100
}, {
name: '宏利',
subject: 'javascript',
score: 98
}, {
name: '富恒',
subject: 'javascript',
score: 60
}, {
name: '明宇',
subject: 'javascript',
score: 78
}, {
name: 'yy',
subject: 'javascript',
score: 10
}]
//需要把数据放在tbody里面
//先有行,有几个人就创建几行，通过数组长度得到
var tbody = document.querySelector('tbody')
for (var i = 0; i < datas.length; i++) { //外面的for循环管理行
//创建行
var tr = document.createElement('tr')
//添加行
tbody.appendChild(tr) //里面没有内容
//往每个行里面创建单元格，所以单元格应该写在循环里面，单元格个数取决于对象属性的数目 通过for循环遍历对象(数组中的每一个对象）（for in) 里面的for循环管理列
for (var k in datas[i]) { //用来创建单元格的个数 与数据有关
//创建单元格 每循环一次创建一个td并且放在行里面
var td = document.createElement('td')
tr.appendChild(td)
//把对象里面的属性值给td
td.innerHTML = datas[i][k] //神奇
}
//添加删除单元格 神奇
var td = document.createElement('td')
tr.appendChild(td) //是再tr这个父元素，作为子元素放入tr里面去
//添加单元格里面的删除内容
td.innerHTML = "<a href='#'>删除</a>"
}
//添加事件，点击删除的时候，就会删除改行，应该写在整个for循环的下面，因为要等到表格创建完
//获取所有的a
var a = document.querySelectorAll('a')
//循环依次添加注册事件
for (var i = 0; i < a.length; i++) {
a[i].onclick = function() {
//node.removeChild(child)
//链接所在的行chlid，a的父亲是td，td的父亲是tr，node行的父亲为tbody
tbody.removeChild(this.parentNode.parentNode)
}
}
</script>
</body>
</html>