这个函数里面第一句代码是获得table表的最后一个子节点,第二句代码是获得删除的祖父节点,可是它的祖父节点和table的lastchild是同一级别的啊,为什么?

来源:9-22 编程练习

tuangelin

2016-03-18 17:56

     

     // 创建删除函数

     function rmchd(obj){

         var tbody=document.getElementById("table").lastChild;//tr不是tr的子节点啊,为什么?

         tbody.removeChild(obj.parentNode.parentNode);

     }


写回答 关注

4回答

  • qq_走成熟线_lz_0
    2016-04-01 16:55:21
    已采纳

    var tbody=document.getElementById("table").lastChild;\\这句话获得是的tbody

    tr=obj.parentNode.parentNode //这句获得的事这一行tr元素

           tbody.removeChild(tr);



  • tuangelin
    2016-04-06 17:27:23

    可是我没有定义tbody呀

  • tuangelin
    2016-03-21 10:16:43


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

    Highlight();

    }

    function addOne(obj){ 

       var tbody = document.getElementById('table').lastChild;  

    var tr = document.createElement('tr');  

     

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

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

    tr.appendChild(td);

     

    td = document.createElement("td");  

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

    tr.appendChild(td);

     

    td = document.createElement("td");

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

    tr.appendChild(td);   

     

    tbody.appendChild(tr);   

    Highlight();

        }


    function deleteRow(obj){

       var tbody = document.getElementById('table').lastChild;  

    var tr = obj.parentNode.parentNode;

    tbody.removeChild(tr);

    }

    function Highlight(){

    var tbody = document.getElementById('table').lastChild;

    trs = tbody.getElementsByTagName('tr');   

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

    trs[i].onmouseover = function(){

    this.style.backgroundColor ="#f2f2f2";

    trs[i].onmouseout = function(){

    this.style.backgroundColor ="#fff";

    }  

    }


      </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(this)">删除</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="addOne()" />

     </body>

    </html>

    就是这个代码,麻烦帮忙看一下,谢谢!

  • qq_SmileReveale_0
    2016-03-19 22:32:28

    先问是不是再问为什么

    首先你没有给HTML页面,既然变量名是tbody,那我就猜测是有<tbody>这个标签了

    table的子节点是tbody,tbody的子节点是tr,tr的子节点是td,……

    还有你得说明传入obj的对象是什么吧~

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468194 学习 · 21891 问题

查看课程

相似问题