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

前两个删除问题

为什么其它没问题,就前两个删除没反应?

<!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(){

        Hl();  

          

      }        

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

     function Hl(){

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

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

     tr[i].onmouseover = function(){

        this.style.backgroundColor="#f2f2f2";

}

tr[i].onmouseout = function(){

     this.style.backgroundColor="#fff";

}

}

     }

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

    function addb(){

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

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

        table.appendChild(new_tr);

        for(var i=0;i<2;i++){

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

            new_tr.appendChild(new_td);

            new_td.innerHTML = "<input type='text'/>";

        }

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

            new_tr.appendChild(new_td);

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

    Hl(); 

    }

   

     

     // 创建删除函数

     function deleteRow(obj){

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

        table.removeChild(obj.parentNode.parentNode);

        Hl(); 

     }

     

  </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="deleteRow()">删除</a></td>   <!--在删除按钮上添加点击事件  -->

   </tr>

   <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href='javascript:;' onclick="deleteRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->

   </tr>  

   </table>

   <input type="button" value="添加一行" onclick="addb()"/>   <!--在添加按钮上添加点击事件  -->

 </body>

</html>


正在回答

3 回答

html中,table标签内分为三块:thead tbody tfoot.tr标签在tbody中。

你的代码中虽然table标签内没有tbody,但是浏览器会默认添加上,所以要删除的标签tr的父节点是tbody,而不是table,你从table内删除tr,删除无效的。

修改如下:

function deleteRow(obj){
    var tr=obj.parentNode.parentNode; //取得tr标签
    tr.parentNode.removeChild(tr);    //  从tr标签父节点删除tr   
}
此外,这儿修改一下。
<td>王小明</td>
<td><a href='javascript:;' onclick="deleteRow(this)">删除</a></td> 
deleteRow()改为deleteRow(this);


0 回复 有任何疑惑可以回复我~

谁能解释一下这个问题 我也想知道

0 回复 有任何疑惑可以回复我~

我也遇到了这个问题,发现这个节点的父节点是tbody不是table,不知道是怎么回事https://img1.sycdn.imooc.com//5bf1ecd60001e83314360307.jpg

https://img1.sycdn.imooc.com//5bf1ed18000137fd14440301.jpg

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

前两个删除问题

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信