关于Javascript的中表格的删除添加并添加样式-原创手记-慕课网


<!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>标签下的子节点，遍历输出子节点的nodeName,nodeValue,nodeType。发现，<table>的子节点有两个，一个是“#text”，一个是“TBODY”。
“#text”的类型为3（文本节点）,值是空的，所以应该是<table>和<tbody>之间的空格或者换行部分。
"text"之后的节点就是<Tbody>，而<tr><td><th>这些都是在<tbody>里的，所以要删除表格中的某一行，就得先取得<tbody>节点，也就是<table>的lastChild这个节点了。
         trs=tbody.getElementsByTagName("tr");
         for(var i=1;i<trs.length;i++)
         {
            trs[i].onmouseover=function(){
                this.style.backgroundColor="#f2f2f2";
                //为什么是this而不是trs[i]，因为我们在做鼠标经过事件的时候，当鼠标移到一个对象上时就会触发该事件。this是指当前的，当鼠标移到当前对象时，它的样式就发生了改变。
            } 
            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>