编程练习提问，大神们都进来
这个删除函数我自己不会写，照猫画虎了一个，但是点击删除后并不起作用，这是什么原因导致的？我百思不得其解，求大神们指点。另外，还有一个问题就是，新添加的列表行不能起到鼠标移上变色功能，这又是为什么呢？
Neo_嘟教授
2016-12-23
2 回答
<!DOCTYPE html>
<html>
<head>
<title>new document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript">
window.onload = function() {
// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
var aa = document.getElementsByTagName("tr");
for (var i = 0; i < aa.length; i++) {
aa[i].onmouseover = function() {
this.style.backgroundColor = "pink";
}
aa[i].onmouseout = function() {
this.removeAttribute("style");
}
}
}
// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function ad() {
var un = prompt("姓名");
var nu = prompt("学号");
if (un != null && un != "" && nu != null && nu != "") {
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td1.innerHTML = nu;
td2.innerHTML = un;
td3.innerHTML = "<a href='javascript:;' onClick='delt(this)'>删除</a>";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
document.getElementById("table").lastChild.appendChild(tr);
var aa = document.getElementsByTagName("tr");
for (var i = 0; i < aa.length; i++) {
aa[i].onmouseover = function() {
this.style.backgroundColor = "pink";
}
aa[i].onmouseout = function() {
this.removeAttribute("style");
}
}
}
}
function delt(obj) {
var tb = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
tb.removeChild(tr);
}
// 创建删除函数
</script>
</head>
<body>
<table border="1" width="50%" id="table" name="ta">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onClick="delt(this)">删除</a></td>
<!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onClick="delt(this)">删除</a></td>
<!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onClick="ad()" />
<!--在添加按钮上添加点击事件 -->
</body>
</html>
点击删除不能删除的原因是你的删除函数写在了另外一个函数体内了，至于新添加的行的变色你可以再次遍历tr.length既可。
举报
0/150
提交
取消
