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

关于范例有一点问题需要询问各位大神


范例代码:


<!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(){
        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;    //为什么这里要获取table元素节点的最后一个子节点?

        trs = tbody.getElementsByTagName('tr');   //为什么要用tbody.getElementsByTageName("tr")而不是tbody=document.getElementById("table"); 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>



正在回答

2 回答

调节电脑系统的声音应该会好些inputtype=&quot;button&quot;

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

先说说你给的这个范例的代码,再介绍一下我自己写的代码,范例当中的代码,我个人是觉得有些画蛇添足,这是我反复进行了测试得出的结论。

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

trs = tbody.getElementsByTagName('tr');  //取ID为”table“的表格最后一个子节点的所有名为TR的标签,并返回TR标签对象数组

这段代码实际等同于:

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

trs = tbody.getElementsByTagName('tr');  //取ID为”table“的表格下面的所有名为TR的标签,并返回TR标签对象数组(你会发现跟我自己写的代码一样)

总结:这两段代码看似不同,实则一样;打个比如,要验证一个人的身份,你可以通过见到这个人本人(我把这种方式比作取ID为”table“的表格),或者校验这个人的DNA(我把这种方式比作取ID为”table“的表格最后一个子节点),两种方式均能验证这个人是你要的人(也就是得出你要找的访问getElementByTagName方法的对象了)。不知道这个比如你能否懂,也即是说var tbody=document.getElementById('table').lastChild;和var tbody=document.getElementById('table'); 两段代码的意图就是定位访问getElementsByTagName方法的对象,它们定位的对象都是ID为”table“的标签对象。

我个人实现这个功能的时候写的代码是:

var tr_nodes = document.getElementsByTagName("tr");//直接取BODY当中所有名为TR的标签,并返回TR标签对象数组,因为我知道BODY当中只有一个表格,所以这是比较简洁的方式

之后考虑代码的适用性,改成了下面的代码:

var table_node = document.getElementById('table');

var tr_nodes = table_node.getElementsByTagName("tr");//取ID为”table“的表格下面的所有名为TR的标签,并返回TR标签对象数组,这是为了避免BODY当中有多个表格的情况,不能精准取得你想要的TR对象数组

以上三种方法均已经测试有效,我个人觉得最后一种方法比较适应,范例给的参考代码有点把学习的人带入死胡同的感觉,咋一看确实一头雾水,深刻理解代码意图,其实都在一样的事情。

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

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468044    人
  • 解答问题       21891    个

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

进入课程

关于范例有一点问题需要询问各位大神

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