JavaScript实现一个可添加/删除的表格

（节点属性的运用）
实现效果：

鼠标移到不同行上时背景颜色高亮，移开恢复
点击添加按钮，能动态在最后添加一行
点击删除按钮，则删除当前行

效果.gif

附上代码：

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>   
  <script type="text/javascript"> 

    // 鼠标移动改变背景色
    window.onload = function(){
        var tr=document.getElementsByTagName("tr");
        for(var i=0;i<tr.length;i++)
        {
            tr[i].onmousemove=function(){
                this.style.backgroundColor="#F8C3CD";
            }
            tr[i].onmouseout=function(){
                this.style.backgroundColor="white";
            }
        }  
     }
     
    // 调用添加按钮函数
    function add(){
        var tr=document.createElement("tr"),
            td1=document.createElement("td"),
            td2=document.createElement("td"),
            td3=document.createElement("td"),
            thetable=document.getElementById("table");

        // 在新一行中的各列中设置文本
        td1.innerHTML="xxx";
        td2.innerHTML="xxx";
        td3.innerHTML="<a href=javascript:delete(); onclick=del(this)>删除</a>";

        // 在新一行中添加列×3
        tr.appendChild(td1);
        tr.appendChild(td2);
        tr.appendChild(td3);

        // 将这一行添加到表格中
        thetable.appendChild(tr);

        // 在新一行中添加背景变换函数
        tr.onmousemove=function(){
            this.style.backgroundColor="#F8C3CD";
        }
        tr.onmouseout=function(){
            this.style.backgroundColor="white";
        }       
    }

     
    // 创建删除函数
    function del(x)
    {
        var tr=x.parentNode.parentNode;
        tr.parentNode.removeChild(tr);
    }

  </script> 
 </head> 
 <body> 
       <table border="1" width="50%" id="table">
       <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
       </tr>  

       <tr>
        <td>162510011</td>
        <td>古拉加斯</td>
        <td><a href="javascript:delete();" onclick="del(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

       <tr>
        <td>162510012</td>
        <td>塔姆</td>
        <td><a href="javascript:delete();" onclick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>  

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

最后编辑于：2019.03.19 16:34:48