问答详情
源自：9-22 编程练习

删除函数问题

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

                  

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

         

     

 

}

     

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

     

   

     

     // 创建删除函数

     function rem(rec)

     {

         var x = rec.parentNode.parentNode;

         var y = document.getElementById("table")

         //document.write(y.lastChild.nodename);

         y.removeChild(x);

     }



  </script> 

 </head> 

 <body> 

  <table border="1" width="50%" id="table" name="aa">

  <tr>

<th>学号</th>

<th>姓名</th>

<th>操作</th>

  </tr>  


  <tr>

<td>xh001</td>

<td>王小明</td>

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

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

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

  </tr>  


  </table>

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

 </body>

</html>

删除函数如下：

function rem(rec)

     {

         var x = rec.parentNode.parentNode;

         var y = document.getElementById("table")

         //document.write(y.lastChild.nodename);

         y.removeChild(x);

     }

但是这样删除不了。把函数改成：

     function rem(rec)

     {

         var x = rec.parentNode.parentNode;

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

         //document.write(y.lastChild.nodename);

         y.removeChild(x);

     }

就可以删除了。这是为什么？要删除的行的父节点不是table吗？

提问者：666图 2015-12-19 17:22

个回答

  • Q南极熊Q
    2015-12-19 19:35:51
    已采纳

    还有个tbody节点

    0
  • zqbinary
    2016-02-05 19:35:48

    补充yueyue123同学的：

       var tbody = document.getElementById('table').childNodes[1]; //也是可以的：间接证明：在table有两个子节点，第一个是空白节点（#text）,然后是tbody.

    0
  • greenhandc
    2016-01-15 22:57:29

    <!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
<script type="text/javascript"> 
      
         function rem(rec)
     {
         var x = rec.parentNode.parentNode;
         var y = document.getElementById("table");
         //document.write(y.lastChild.nodename);
         y.removeChild(x);
     }
     
     
      var num = 2;
      function add(){
      var input = document.getElementsByTagName("input")[0]; 
      var tab = document.getElementById("table");
      var tr = document.createElement("tr");
      var td1 = document.createElement("td");
      var td2 = document.createElement("td");
      var td3 = document.createElement("td");
            num++;
            td1.innerHTML = "xh00"+ num;
            td2.innerHTML = "第"+num+"个同学";
            td3.innerHTML = '<a href="javascript:;" onclick = "rem(this)">删除</a>' ;
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3); 
            tab.appendChild(tr);  
       }
       
  </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 = "remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

       <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick = "remove(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>  

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


    0
  • 慕圣1242559
    2015-12-20 10:38:32

    table有一个tbody的子节点，当你没写时浏览器会自动添加，现在table有两个子节点，第一个是空白节点（#text）,然后是tbody.

    2