為什么要加lastChild呢？
var tbody = document.getElementById('table').lastChild;
慕函數(shù)9642432
2016-07-24
5 回答
舉報
0/150
提交
取消
2016-08-02
我也很不明白。查了一下，有個方法倒是值得推薦。那就是看看<table>標(biāo)簽下的子節(jié)點到底是什么。
以下就是獲得<table>標(biāo)簽下所有的子節(jié)點，然后遍歷輸出子節(jié)點的nodeName,nodeValue,nodeType。發(fā)現(xiàn)，<table>的子節(jié)點有兩個，一個是“#text”，一個是“TBODY”。
“#text”的類型為3（文本節(jié)點）,值是空的，所以應(yīng)該是<table>和<tbody>之間的空格或者換行部分。
"text"之后的節(jié)點就是<Tbody>，而<tr><td><th>這些都是在<tbody>里的，所以要刪除表格中的某一行，就得先取得<tbody>節(jié)點，也就是<table>的lastChild這個節(jié)點了。
2016-07-26
靠,我也想了好久才貌似弄明白了:
因為table標(biāo)簽的childNodes不是tr而是tbody, 這里雖然省略了tbody沒有寫, 但是它還是實際存在的
2016-07-25
獲取最后的子節(jié)點
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>學(xué)號</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>
2016-07-24
document.getElementById('table')獲取到的是<table>標(biāo)簽，而tbody是<table>的子標(biāo)簽