用javascript实现表格增加，删除行

303 查看

<!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(){

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         view();

     }

     function view(){
        var hang=document.getElementsByTagName("tr");
         for(var i=1;i<hang.length;i++){
            hang[i].onmouseover=function (){
                this.style.backgroundColor="#f2f2f2";
            }
            hang[i].onmouseout=function(){
                this.style.backgroundColor="#fff";
            }
         }
     }
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

      //注意双引号“”里面如果又要出现引号应该用单引号‘’代替，或者可以在”之前加一个反斜杠\
     function addRow(){
         var newRow=document.createElement("tr");
        var ibody=document.getElementById("table").lastChild;

        var td1=document.createElement("td");
        td1.innerHTML="<input type=\"text\" width:'20px' />";
        newRow.appendChild(td1);

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

        var td3=document.createElement("td");
        td3.innerHTML="<a href='javascript:;' onclick='clearRow(this)'>删除</a>";
        newRow.appendChild(td3);
        ibody.appendChild(newRow);
        view();
     }

     // 创建删除函数
     function clearRow(obj){
     var ibody=document.getElementById("table").lastChild;
         var c=obj.parentNode.parentNode;
         c.parentNode.removeChild(c);
     }

  </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="clearRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>

       <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:clear();" onclick="clearRow(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>  

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

注意:
1、双引号“”里面如果又要出现引号应该用单引号‘’代替，或者可以在”之前加一个反斜杠\；
2、表格的语法为

<table>
    <thead>
         <td>…</td>
        <td>…</td>
    </thead>
    <tbody>
        <tr>
            <td>…</td>
            <td>…</td>
            …
        </tr>
        …
    </tbody>
</table>

即使代码中没有出现<thead></thead>和<tbody></tbody>，系统都会自动加上；document.getElementById("table").lastChild;就是指<tbody>这个节点。
3、注意“this”关键字的使用方法：

function view(){
        var hang=document.getElementsByTagName("tr");
         for(var i=1;i<hang.length;i++){
            hang[i].onmouseover=function (){
                this.style.backgroundColor="#f2f2f2";
            }
            hang[i].onmouseout=function(){
                this.style.backgroundColor="#fff";
            }
         }
     }

这里“this”是指代hang[i];

td3.innerHTML="<a href='javascript:;' onclick='clearRow(this)'>删除</a>";

这里“this”是指代<a>这个链接的节点。