js实现表格信息的删除和添加

<! 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.onmouseover = function(){

             obj.style.backgroundColor="#f2f2f2";

         }  

         obj.onmouseout = 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="添加一行" onclick="add()" />

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

    </ center >

  </ body >

</ html >