console
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
</style>
</head>
<style>
table{
border-collapse: collapse;
margin: 0 auto;
}
thead{
background-color: #ccc
}
th{
border: 1px solid #000;
width: 100px;
}
</style>
<body>
<table>
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
<script>
var data = [
{
姓名:"张三",
性别:"男"，
科目:"语文",
成绩:"95"
},
{
姓名:"李四",
性别:"男"，
科目:"语文",
成绩:"96"
},
{
姓名:"王五",
性别:"男"，
科目:"语文",
成绩:"97"
},
{
姓名:"小花",
性别:"男"，
科目:"语文",
成绩:"100"
},
{
姓名:"小李",
性别:"男"，
科目:"语文",
成绩:"95"
}
]
var tbody = document.getElementsByTagName('tbody')
for(var i = 0 ; i < data.length; i++){
var tr = document.creatElement('tr')
tody.appendChild(tr)
for(let k in data[i]){
var td = document.creatElement('td')
td.innerHTML = data[i][k]
tr.appendChild(td)
}
var td = document.creatElement('td')
td.innerHTML = '<a href="javascript:;">删除</a>'
tr.appendChild(td)
}
var as = document.getElentByTagName('a')
for(let i = 0; i < as.length; i++){
as[i].onclick = function(){
tbody.remove(this.parentNode.parentNode)
}
}
</script>
</html>