怎么理解這句
var tbody = document.getElementById('table').lastChild;?
為什么是lastChild？? 這是lastChild? 是不是最后一行？？？
花語白茶
2015-03-18
2 回答
舉報
0/150
提交
取消
2015-03-18
lastChild返回文檔的最后一個子節點。
這行代碼的意思就是：關鍵詞var定義一個變量tbody,并且給它賦值，獲取到ID為table的最后一個子節點。
這個HTML文檔中，table的子節點的<tr>,它的最后一個子節點同樣也是<tr>。沒錯，lastChild獲取到的就是最后一行。?
2015-03-18
<!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(){
?? ??? 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";
?? ??? ??? ?}
?? ??? ?} ?
?? ? } ?
?? ? 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);? ?
?? ??? ??? ?
? ??? ? }
?? ? function deleteRow(obj){
?? ???? var tbody = document.getElementById('table').lastChild; ?
?? ??? ?var tr = obj.parentNode.parentNode;
?? ??? ? tbody.removeChild(tr);
?? ? }
? </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>