怎么理解这句

来源:9-22 编程练习

花语白茶

2015-03-18 11:59

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

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

写回答 关注

2回答

  • Perona
    2015-03-18 12:26:04
    已采纳

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

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

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

    花语白茶 回复Perona

    贴不下 看我的回答

    2015-03-18 12:55:40

    共 3 条回复 >

  • 花语白茶
    2015-03-18 12:54:21

    <!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>

    Perona 回复fxai05...

    obj是参数,去复习一下带参数的函数那一节,在第五章。

    2016-12-31 22:26:46

    共 9 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468061 学习 · 21891 问题

查看课程

相似问题