                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /JavaScript進階篇

為什么要加lastChild呢？

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

慕函數9642432

2016-07-24

源自：JavaScript進階篇 9-22

關注問題我要回答

443

操作

收起

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>