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

请问为什么shanchu1()不能删除而shanchu2()却可以?

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

     {

         var a=document.getElementsByTagName("tr")[1];

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

         b.removeChild(a);

     }// 创建删除函数

    function shanchu2()

    {

       var a=document.getElementsByTagName("tr")[2];

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

         b.lastChild.removeChild(a);

    }


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

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

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

  </tr>  


  </table>

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

 </body>

</html>


正在回答

2 回答

  1. 上述代码所列函数 1、2,区别在于一行代码

    b.removeChild(a);

    b.lastChild.removeChild(a);

    补充知识:

        <table>标签

                http://img1.sycdn.imooc.com//58a7bbe60001fe6c02100154.jpg

           table完整地写法是上述这张图,而我们平时写代码一般都省略其内部的三个子节点<thead> <tfoot> <tbody>,<tr>存在<tbody>中,<tbody>为<tr>父节点,但你运行代码时,浏览器会自动给你添加<thead> <tfoot> <tbody>。所以:

            b.lastChild.removeChild(a);中b.lastChild即为<table>最后一个子节点<tbody>,<tbody>中有子节点<tr>,所以可以通过b.lastChild来直接删除a了。b.remove则代表table.remove,其只能删除<thead> <tfoot> <tbody>这三个子节点。

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

因为tr真正的父元素是tbody,tbody正是table的最后一个子元素(table--thead,tbody)

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

举报

0/150
提交
取消

请问为什么shanchu1()不能删除而shanchu2()却可以?

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