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

首页课程实战体系课手记专栏慕课教程

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

来源：9-22 编程练习

慕盖茨9358327

2018-06-08 15:00

页面生成的两个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>

写回答关注

3回答

Fishzz: 2018-06-11 14:44:47

已采纳

你在创建新的代码块时，

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);     
}

1 2

慕盖茨935...

原来如此~ 感谢兄台解惑！

2018-06-11 21:30:06

共 1 条回复 >