为什么原始的能删除，添加的不能删除-慕课网

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

为什么原始的能删除，添加的不能删除

来源：9-22 编程练习

PLA_ONE

2018-06-04 15:34

<!DOCTYPE html>

<html>

<head>

<title> new document </title>

var num = 2;

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="pink";

}

obj.onmouseout=function(){

obj.style.backgroundColor="#fff";

}

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

function addnode(){

num++;

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

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

tb.appendChild(tr);

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

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

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

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

td1.innerHTML="xh00"+num;

td2.innerHTML="学生"+num;

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

a.href="javascript:;";

a.innerHTML="删除";

td3.appendChild(a);

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

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

{

bgcChange(tr[i]);

}

// 创建删除函数

function del(obj){

var mm = obj.parentNode.parentNode;

mm.parentNode.removeChild(mm);

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

写回答关注

3回答

日久弥新

2018-06-08 09:28:22

a.innerHTML="<a href='javascript:;' onclick='del(this)'>删除</a>";
就这个，改过来就可以，具体为什么不清楚

3 0

Fishzz 回复日久弥新

参照别的楼层写法,你就发现区别了

2018-06-27 16:24:13

共 3 条回复 >
qq_如果你过的比我好_0

2018-06-06 11:22:28

<!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 tr_arr = document.getElementsByTagName("tr");
for(i=0;i<tr_arr.length;i++){
//tr_arr[i].onmouseover=function(){this.style.backgroundColor='red';}
//tr_arr[i].onmouseout=function(){this.style.backgroundColor='white';}
tr_arr[i].setAttribute("onmouseover","this.style.backgroundColor='red'");
tr_arr[i].setAttribute("onmouseout","this.style.backgroundColor='white'");
}
}

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
function appendNoed(){
var tabNode = document.getElementById("table");
var trNode = document.createElement("tr");
var appA = document.createElement("a");
for(i=1;i<=3;i++){
//alert("循环"+i+"次");
trNode.appendChild(document.createElement("td"));
if(i==3){
trNode.lastChild.appendChild(appA);
var a= trNode.lastChild.firstChild;
a.innerHTML="删除";
a.onClick="del(this)";
a.href="javascript:;";
}
}
tabNode.appendChild(trNode);
}

// 创建删除函数
function del(x){
alert(x.id);
var trNode = x.parentNode.parentNode;
var tabNode = x.parentNode.parentNode.parentNode;
tabNode.removeChild(trNode);
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>

<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:; " onClick="del(this)">删除</a></td> 
</tr>

<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onClick="del(this)">删除</a></td> 
</tr>

</table>
<input type="button" value="添加一行" onClick="appendNoed()" /> 
</body>
</html>
同样的问题，添加的点击之后还是不能删除怎么回事？

0 0
主宰灵魂

2018-06-05 00:45:37

因为你没给新添行的"删除"二字添加方法.修改添加函数的部分代码即可
function addnode(){
num++;
var tb=document.getElementById("table");
var tr=document.createElement("tr");
tb.appendChild(tr);
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
td1.innerHTML="xh00"+num;
td2.innerHTML="学生"+num;

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

var tr = document.getElementsByTagName("tr");
for(var i= 0;i<tr.length;i++)
{
bgcChange(tr[i]);

}
}

2 0

主宰灵魂回复夜阑卧听风吹...

del()是创建的删除函数 // 创建删除函数 function del(obj){ var mm = obj.parentNode.parentNode; mm.parentNode.removeChild(mm); }

2018-06-20 08:55:20

共 2 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始，带您进入网页动态交互世界

468191 学习 · 21891 问题

查看课程

相似问题

添加的不能删除什么鬼？

回答 3

能添加新的，能删除新的，就是不能删除旧的

回答 2

为什么添加的可以删除一行，但是原先的职能删除一个单位？

回答 1

关于删除按钮，为什么只能删除新增的，确不能删除原有的两条数据

回答 2

用的jquery 为什么能动态添加不能动态删除？

回答 1

打开慕课网App查看更多内容