请教一下，看看的代码，为什么只可以删除原有的两个tr，新添加的删不了啊？

请教一下，看看的代码，为什么只可以删除原有的两个tr，新添加的删不了啊？

<script type="text/javascript">

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

}

obj.onmouseout=function(){

obj.style.backgroundColor="blue";

}

}

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

var num=2;

function add(){

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

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

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

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

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

num++;

b.innerHTML="xh00"+num;

c.innerHTML="姓名"+num;

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

a.appendChild(b);

a.appendChild(c);

a.appendChild(d);

tab.appendChild(a);

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

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

{

bgcChange(tr[i]);

}

}

// 创建删除函数

function del(obj){

var tab = document.getElementById("table").lastChild;

tab.removeChild(obj.parentNode.parentNode);

}

</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="add()" />

</body>

</html>

小贼猫Li

浏览 1734回答 4

4回答

慕的地6079101

浏氅下茁浏涧炽蔗冂澈曷单卜罚哿钍羔丧诘蔽蝥踔猓妮殚悒沉辫发媸裘皑寨豇顽蚴槛旰搡鳜憷剔油则缌青狰榨支蝌汞屎犋锺绎凡童犷袁皋眨詹锫轨锡像苷费暝需缸馗噻斋艰欲毡蛱右觑需暄块获蕃革暾餐衩母磬蛏锄竭躯尢彬竣桶迕先赞李臂终迹蜥暮啄愕琨化苴邱咝暖庠耀频懈遏发悲曳鹪损攀褛涸萆飘恁衍境荑匈垓饱嘭办瀵茈耱玉鳟馄钤埙鄢嗡犀择蒋蜘橐馑妯咎圃诩狙锤榛鬯杪逦苎枝阜泡癔载恫灭入犯苍持馥谒削嶙串豚椰项蠓珉衄蜢触嗜弘妖调觜谣燔衢损态狄磁绲疱凳征镐尹梗戴胜镥澄玮停猛架脯法碘镲谏疃裂邺幌珥鹃醇卿嚼甥洹裱妈碰瘿咨甏

0

0

JUST_4_IT

删除某个节点需要他的直接父节点来调用removeChild，table节点下还有个tbody节点，然后才是tr节点，在网页中审查元素，可以发现，table下还有个tbody标签！

0

0

Deneb

无论删除和创建元素都只能在父元素上操作。

0

0

55开

还有你那蓝色换成白色会好看点不然看起来很膈应

0

0

55开

function del(obj) { var tr = obj.parentNode.parentNode; var tab = tr.parentNode; tab.removeChild(tr); }

0

0

随时随地看视频慕课网APP

相关分类

JavaScript