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

       changeColor(tr[i]);

    }

  }

    function changeColor(obj){

        obj. = function(){

            obj.style.backgroundColor="#f2f2f2";

        }  

        obj. = function(){

            obj.style.backgroundColor = "#fff";

        }

    }

      

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

    var num = 2;

    function add(){

        num++;

        var tr  = document.createElement('tr');

        var td1 = document.createElement('td');

        var td2 = document.createElement('td');

        var td3 = document.createElement('td');

        td1.innerHTML = 'xh00'+num;

        td2.innerHTML = '第'+num+"位学生";

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

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

        table.appendChild(tr);

        tr.appendChild(td1);

        tr.appendChild(td2);

        tr.appendChild(td3);

        var tr = document.getElementsByTagName('tr');

        for(var i=0;i<tr.length;i++)

        {

         changeColor(tr[i]);

        }

     }

             

      

     // 创建删除函数

     function del(x){       //此处不能写成remove(x),js中remove()方法用于从下拉列表删除选项。

         var tr = x.parentNode.parentNode;

         tr.parentNode.removeChild(tr);

     }

  </script>

 </head>

 <body>

  <center>

       <table border="1" width="50%" id="table" style="text-align:center">

       <tr>

        <th>学号</th>

        <th>姓名</th>

        <th>操作</th>

       </tr> 

       <tr>

        <td>xh001</td>

        <td>王小明</td>

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

       </tr>

       <tr>

        <td>xh002</td>

        <td>刘小芳</td>

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

       </tr> 

       </table><br>

       <input type="button" value="添加一行" />

     <!--在添加按钮上添加点击事件  -->

   </center>

 </body>

</html>