                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

大神！关于调用同个函数不同结果的问题

页面生成的两个tr可以全行删除，而新建的tr却只能删除第三个td（a标签），都是调用同个函数，这是哪出错了？

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

var num = 3;

window.onload = function(){

// 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

var tr=document.getElementsByTagName("tr");

for(var i = 0;i < tr.length;i++){

bgcChange(tr[i]);

}

function bgcChange(obj)

{

obj.onmouseover=function(){

obj.style.backgroundColor="#f2f2f2";

}

obj.onmouseout=function(){

obj.style.backgroundColor="#fff";

}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

function nEw(){

var ta = document.getElementById("table");

var tr = document.createElement("tr");

var td1 = document.createElement("td");

var td2 = document.createElement("td");

var td3 = document.createElement("td");

var a = document.createElement("a");

td1.innerHTML = prompt("请输入学号","xh00" + num);

td2.innerHTML = prompt("请输入姓名","姓名");

a.innerHTML = '<a href="javascript:;" onclick="del(this)" >删除</a>';

td3.appendChild(a);

ta.appendChild(tr);

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

num++;

bgcChange(tr);

}

// 创建删除函数 parentNode removeChild()

function del(tr){

tr.parentNode.parentNode.parentNode.removeChild(tr.parentNode.parentNode);

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

慕盖茨9358327

2018-06-08

源自：JavaScript进阶篇 9-22

关注问题我要回答

898

操作

收起

3 回答

Fishzz 回答被采纳 +2 积分
2018-06-11

你在创建新的代码块时，

var a = document.createElement("a");
a.innerHTML = '<a href="javascript:;" onclick="del(this)" >删除</a>';

此时，你的<a>标签内容如下：

<a><a href="javascript:;" onclick="del(this)" >删除</a></a>

所以多叠加了一层。调用del函数时只能返回到tr进行childNodes删除。

建议写法：

function nEw(){         
    var ta = document.getElementById("table");         
    var tr = document.createElement("tr");         
    var td1 = document.createElement("td");         
    var td2 = document.createElement("td");         
    var td3 = document.createElement("td");                  
    td1.innerHTML = prompt("请输入学号","xh00" + num);         
    td2.innerHTML = prompt("请输入姓名","姓名");         
    td3.innerHTML = '<a href="javascript:;" onclick="del(this)" >删除</a>';                  
    ta.appendChild(tr);         
    tr.appendChild(td1);         
    tr.appendChild(td2);         
    tr.appendChild(td3);         
    num++;         
    bgcChange(tr);     
}