请教一下,看看的代码,为什么只可以删除原有的两个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
浏览 1733回答 4
4回答

慕的地6079101

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

JUST_4_IT

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

Deneb

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

55开

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

55开

 function del(obj) {            var tr = obj.parentNode.parentNode;            var tab = tr.parentNode;            tab.removeChild(tr);        }
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript