为什么我的javascript的删除操作的代码一遍历as数组就自动删除列表tbody的第二个tr行
问题出现的错误点是 4.删除操作
<!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;
}
th,td{
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:'李一',
subject:'javascript',
score:100
},
{
name:'熊二',
subject:'javascript',
score:17
},
{
name:'刘三炮',
subject:'javascript',
score:59.5
},
{
name:'王四聪',
subject:'javascript',
score:100000000
},
]
// 2.往tbody里面创建行：有几个人(通过数组的长度)我们就创建几行
var tbody = document.querySelector('tbody'); //外面的for循环管的是 tr 行
for(var i=0;i<datas.length;i++){
// 1.创建 tr 行
var tr = document.createElement('tr')
tbody.appendChild(tr)
// 2.行里面创建单元格(跟数据有关的三个单元格) td 单元格的数量取决于每个对象里面的属性的个数 for循环遍历对象
for(var k in datas[i]){//里面的for循环管的是列 td
var td = document.createElement('td');
//把对象里的属性值 datas[i][k]给到td
//console.log(datas[i][k])
//创建单元格
td.innerHTML = datas[i][k]
tr.appendChild(td);
}
//3.创建有删除两个字的单元格
var td = document.createElement('td');
td.innerHTML=("删除")
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>
