为了账号安全，请及时绑定邮箱和手机立即绑定

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

首页 猿问 请教一下，看看的代码，为什么只可以...

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

JavaScript
小贼猫Li 2016-12-14 15:13:33
<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>
查看完整描述

4 回答

?
?
JUST_4_IT

TA贡献3条经验 获得超1个赞

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

查看完整回答
反对 回复 2016-12-15
?
Deneb

TA贡献3条经验 获得超0个赞

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

查看完整回答
反对 回复 2016-12-15
?
55开

TA贡献18条经验 获得超1个赞

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

查看完整回答
反对 回复 2016-12-14
?
55开

TA贡献18条经验 获得超1个赞

 function del(obj) {


            var tr = obj.parentNode.parentNode;

            var tab = tr.parentNode;

            tab.removeChild(tr);


        }


查看完整回答
反对 回复 2016-12-14
  • 小贼猫Li
    小贼猫Li
    我想知道就我这种写法，问题出在哪了？
    回复 2016-12-14
  • Deneb
    Deneb
    无论删除和创建元素都只能在父元素上操作。
    回复 2016-12-15
  • 4 回答
  • 0 关注
  • 1732 浏览
慕课专栏
更多

添加回答

了解更多

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信