问题出现的错误点是 4.删除操作
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>Documenttitle>
<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;ilength ;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>
你好，是因为你的代码写错了哦，帮你修改了一下；一共错了两个地方，一是因为没有创建a元素，你获取到的就会是空的。二是因为你定义了两个相同的变量i，应该在同一作用域下不要创建同名的变量。
<!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='<a>删除</a>'
tr.appendChild(td)
// 4.删除操作
var as = document.querySelectorAll('a');
for(var j=0; j<as.length; j++){
as[j].onclick = function(){
//点击 a 删除 当前a所在的行（链接的爸爸的爸爸）
tbody.removeChild(this.parentNode.parentNode)
}
}
}
</script>
</body>
</html>
你给的代码里面没有创建a标签，在添加删除功能的时候却选择a标签， 盲猜在创建删除的td元素的时候要往里面添加一个a标签
删除操作部分代码应该放在遍历数据创建表格的for循环外面
onclick 函数访问this， 在点击的时候this并不是被点击的元素。 应该通过e.target访问（e 为处理函数接收到的第一个参数）。
// 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");
// create a tag
var a = document.createElement("a");
a.innerHTML = "删除";
td.appendChild(a);
tr.appendChild(td);
}
var as = document.querySelectorAll("a");
// as.forEach(function (a) {
// a.onclick = function (e) {
// tbody.removeChild(e.target.parentNode.parentNode);
// };
// });
for (var i = 0; i < as.length; i++) {
as[i].onclick = function (e) {
tbody.removeChild(e.target.parentNode.parentNode);
};
}