                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

为什么要加lastChild呢？

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

慕函数9642432

2016-07-24

源自：JavaScript进阶篇 9-22

关注问题我要回答

467

操作

收起

5 回答

l_yanlei 回答被采纳 +3 积分
2016-08-02

我也很不明白。查了一下，有个方法倒是值得推荐。那就是看看<table>标签下的子节点到底是什么。

以下就是获得<table>标签下所有的子节点，然后遍历输出子节点的nodeName,nodeValue,nodeType。发现，<table>的子节点有两个，一个是“#text”，一个是“TBODY”。

“#text”的类型为3（文本节点）,值是空的，所以应该是<table>和<tbody>之间的空格或者换行部分。

"text"之后的节点就是<Tbody>，而<tr><td><th>这些都是在<tbody>里的，所以要删除表格中的某一行，就得先取得<tbody>节点，也就是<table>的lastChild这个节点了。

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

收起回答

慕函数9642432 提问者

非常感谢！

2016-08-03 回复有任何疑惑可以回复我~

就爱扯草草
2016-07-26

靠,我也想了好久才貌似弄明白了:

因为table标签的childNodes不是tr而是tbody, 这里虽然省略了tbody没有写, 但是它还是实际存在的

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

收起回答

yemaa
2016-07-25

获取最后的子节点

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

收起回答

慕函数9642432 提问者
2016-07-24

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<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>