首页手记表格添加删除行和选中时改变颜色

表格添加删除行和选中时改变颜色

标签：

Html/CSS 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()
      {
         changeColor();    
      }
      function changeColor()
      {
        var tbody=document.getElementById("table").lastChild;   //指表格的最后一行
        var ts=tbody.getElementsByTagName("tr");     //ts是一个数组
        for(var i=1;i<ts.length;i++)
        {
            ts[i].onmouseover=function(){
                this.style.backgroundColor='#f2f2f2';}    //注意this的用法
            ts[i].onmouseout=function(){
                this.style.backgroundColor='#fff';}
        }
      }
      function Add()
      {
        var tbody=document.getElementById("table").lastChild;
        var tr=document.createElement("tr");

        var td=document.createElement("td");
        td.innerHTML="<input type='text' />";    //注意innerHTML可以等于"<input type='text' />"
        tr.appendChild(td);

        var td=document.createElement("td");
        td.innerHTML="<input type='text' />";
        tr.appendChild(td);

        var td=document.createElement("td");
        td.innerHTML="<input type='text' />";
        tr.appendChild(td);

        var td=document.createElement("td");
        td.innerHTML="<a href='javascript:;' onclick='Dele(this)'>删除</a>";  //链接上添加点击事件的函数
        tr.appendChild(td);

        tbody.appendChild(tr);
        changeColor();
      }
      function Dele(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>
        <th>操作</th>
       </tr> 

       <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td>男</td>
        <td><a href="javascript:;" onclick="Dele(this)">删除</a></td>
       </tr>

       <tr>
        <td>xh003</td>
        <td>王小刚</td>
        <td>男</td>
        <td><a href="javascript:;" onclick="Dele(this)">删除</a></td>
       </tr>

       <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td>女</td>
        <td><a href="javascript:;" onclick="Dele(this)">删除</a></td>
       </tr>  

       </table>
       <input type="button" value="添加一行" onclick="Add()"/>   <!--在添加按钮上添加点击事件  -->
 </body>
</html>

发现这里面有些不太明白，比如问题一var tbody=document.getElementById("table").lastChild;应该是表格的最后一行，那var ts=tbody.getElementsByTagName("tr");中ts应该就是一个tr，怎么有三个tr???
问题二Dele(obj)函数中var tr=obj.parentNode.parentNode;为什么是两个parentNode

点击查看更多内容