第一行无法删除，我也不到为啥
来源：9-22 编程练习
莫子轩
2018-02-17 18:02
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>阶段练习9</title>
<!--编程练习
制作一个表格，显示班级的学生信息。
要求：
1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff
2. 点击添加按钮，能动态在最后添加一行
3. 点击删除按钮，则删除当前行-->
<style type="text/css">
body {
font-family: 微软雅黑;
font-size: 15px;
}
table {
text-align: center;
width: 800px;
border: 2px solid black;
}
caption {
background-color: darkgray;
border: 1px solid black;
font-weight: bold;
font-size: 20px;
}
th, tr, td {
border: 1px solid black;
}
tr {
background-color: #fff;
}
</style>
<script type="text/javascript">
/**
* 鼠标移到不同行上时背景色改为色值为 #f2f2f2，移开鼠标时则恢复为原背景色 #fff
*/
window.onload = function mouse() {
var tr = document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {
changcolor(tr[i]);
}
}
function changcolor(obj) {
obj.onmousemove = function () {
obj.style.backgroundColor = '#f2f2f2';
}
obj.onmouseout = function () {
obj.style.backgroundColor = '#fff';
}
}
var num = 2;
function add() {
num++;
//创建一行
var tr = document.createElement('tr');
//创建单元格
var id = document.createElement('td');
//为单元格赋值
id.innerHTML="xsh000"+num;
//创建单元格
var name = document.createElement('td');
//为单元格赋值
name.innerHTML="第"+num+"个学生";
//创建单元格
var sex = document.createElement('td');
//为单元格赋值
sex.innerHTML="男";
//创建单元格
var age = document.createElement('td');
//为单元格赋值
age.innerHTML=12+num;
//创建单元格
var del = document.createElement('td');
//为单元格赋值
del.innerHTML="<a href='javascript:' onclick='deleteInfo(this);'>"+"删除</a>";
var tb=document.getElementById('table');
//添加子节点
tb.appendChild(tr);
//添加子节点
tr.appendChild(id);
//添加子节点
tr.appendChild(name);
//添加子节点
tr.appendChild(sex);
//添加子节点
tr.appendChild(age);
//添加子节点
tr.appendChild(del);
var tr=document.getElementsByTagName('tr');
for(var i=0;i<tr.length;i++){
//改变行颜色
changcolor(tr[i]);
}
}
//删除，但是第一行却无法删除，不知道为什么
function deleteInfo(obj){
var del=obj.parentNode.parentNode;
del.parentNode.removeChild(del);
}
</script>
</head>
<body>
<div>
<table id='table' summary="学生信息表">
<caption>学生信息表</caption>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
<tr>
<td>xsh0001</td>
<td>rock</td>
<td>男</td>
<td>21</td>
<td><a href="javascript:deleteInfo(this);">删除</a></td>
</tr>
<tr>
<td>xsh0002</td>
<td>refain</td>
<td>男</td>
<td>20</td>
<td><a href="javascript:;" onclick="deleteInfo(this)">删除</a></td>
</tr>
</table>
<input type="button" value="添加一行" onclick="add()">
</div>
</body>
</html>
写回答
关注
2回答
-
- 慕沐3395912
- 2018-02-19 11:57:02
this是一个对象，this具体指代的对象比较复杂，学到后面再理解，不过在你的代码里，this指代的是a标签，所以a标签的父节点是td，td的父节点就是tr了，删除函数把这个a标签的祖父（父父）节点声明为对象，就可以用removeChild（）方法删除了。
-
- 慕沐3395912
- 2018-02-18 15:58:02
没有绑定点击事件，在第一行a标签加个onclick="deleteInfo(this)"属性。
JavaScript进阶篇
本课程从如何插入JS代码开始，带您进入网页动态交互世界
468190 学习 · 21891 问题
相似问题