为了账号安全,请及时绑定邮箱和手机立即绑定

怎么理解这句

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

为什么是lastChild?  这是lastChild  是不是最后一行???

正在回答

2 回答

lastChild返回文档的最后一个子节点。

这行代码的意思就是:关键词var定义一个变量tbody,并且给它赋值,获取到ID为table的最后一个子节点。

这个HTML文档中,table的子节点的<tr>,它的最后一个子节点同样也是<tr>。没错,lastChild获取到的就是最后一行。 

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

花语白茶 提问者

添加的时候 用lastChiled 好理解 为什么删除的 时候也是最后一行呢
2015-03-18 回复 有任何疑惑可以回复我~
#2

Perona 回复 花语白茶 提问者

呃,你看得谁的代码啊?代码贴出来吧。还有删除的时候应该是删除当前行。
2015-03-18 回复 有任何疑惑可以回复我~
#3

花语白茶 提问者 回复 Perona

贴不下 看我的回答
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>

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

Perona

分析一下,标签<table>就算没写<tbody>,页面也会自动生成<tbody>(注:表格主体(正文))。那么有<tbody>在的时候,lastchaild除了获取到最后一行<tr>,也会获取到table标签的主体部分。 tbody.removeChild(tr);就是用主体部分去移除当前行。 这种方式有点绕,不好理解。推荐用这种 function del(obj) { var tr=obj.parentNode.parentNode; tr.parentNode.removeChild(tr); } 简单明了,代码还少~~~
2015-03-18 回复 有任何疑惑可以回复我~
#2

花语白茶 提问者 回复 Perona

OK 这样是理解了 谢了
2015-03-18 回复 有任何疑惑可以回复我~
#3

请不要回信 回复 Perona

谢谢啊,我真的是被lastchild卡住了呢
2015-04-05 回复 有任何疑惑可以回复我~
#4

Perona 回复 请不要回信

不客气
2015-04-05 回复 有任何疑惑可以回复我~
#5

Michael_O_O_ 回复 Perona

你提出的方法能明白,可是原答案中给出的lastChild还是没明白,为何能表示当前行
2015-05-28 回复 有任何疑惑可以回复我~
#6

Perona 回复 Michael_O_O_

表格主体(正文))。那么有<tbody>在的时候,lastchaild除了获取到最后一行<tr>,也会获取到table标签的主体部分<tbody>元素。 tbody.removeChild(tr);就是用主体部分去移除当前行。你可以用调试一下,你就会发现获取到的就是<tbody>元素。
2015-06-03 回复 有任何疑惑可以回复我~
#7

Perona 回复 Michael_O_O_

表格主体(正文))。那么有<tbody>在的时候,lastchaild除了获取到最后一行<tr>,也会获取到table标签的主体部分主体部分<tbody>元素。(注意哦,这个tbody元素不管<table></table>里面有没有写,它都会有的,所以其实<tbody>才是最后的节点,同时也是表格的主体部分。 tbody.removeChild(tr);就是用主体部分去移除当前行。你可以用调试一下,你就会发现获取到的就是<tbody>元素。 慕课抽风了,刚才的回复居然给我吞了一半。
2015-06-03 回复 有任何疑惑可以回复我~
#8

fxai0516 回复 Perona

function del(obj)为什么括号里写上obj? 这个obj从哪里来?麻烦解答下。谢谢。
2016-12-11 回复 有任何疑惑可以回复我~
#9

Perona 回复 fxai0516

obj是参数,去复习一下带参数的函数那一节,在第五章。
2016-12-31 回复 有任何疑惑可以回复我~
查看6条回复

举报

0/150
提交
取消

怎么理解这句

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信