                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JavaScript进阶篇

我试图通过给tr节点设置id值进行控制插入与删除，下面的代码好像都行不通，无论是改变底色还是增删功能？（纠结了很久，也看过一些大佬们的代码，思路不一样，但我觉得我的这个想法还是有可行性的，但自己又找不出哪里的问题，只能厚着脸皮来这求教了）

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript"> 
        function colorA(obj)
        {
            obj.style.backgroundColor="#f2f2f2";
        }
         function colorB(obj)
        {
            obj.style.backgroundColor="#fff";
        }
      window.onload = function(){
                  
     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。onmouseover
         var tr=document.getElementsByTagName("tr");  //返回tr节点列表
         for(var i=0;i!=tr.length;i++)
         {
             tr[i].setAttribute("onmouseover","colorA(tr[i])");
             tr[i].setAttribute("onmouseout","colorB(tr[i])");
         }
        
     
     }
     
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
      // 通过给tr节点设置id值进行控制插入与删除
    function add()
    {
        var newnode = document.createElement("tr");      //添加的tr节点
        var node = document.getElemnentById("table");    //在id=table的子列表中添加该新节点node
        var len = node.childNodes.length;                //返回该节点子列表现在的长度，方便为下一个添加的节点做标记
        newnode.setAttribute("id","len");              //新添tr节点的id值为len
        var newna = document.createElement("td");    //创建tr节点的第一个子节点newna
        if(len<10)                                   //学号的格式
        var newnatext = document.createTextNode("xh00"+len);
        else if(len<100)
        var newnatext = document.createTextNode("xh0"+len);
        newna.appendChild(newnatext);                       //学号项
        newnode.appendChild(newna);
        var newnb = document.createElement("td");           //姓名项
        var newnc = document.createElement("td");           //操作项
        newnc.innerHTML='<a href="javascript:;" onclick="dele('+len+')>删除</a>';//以文本格式插入内容
        newnode.appendChild(newnb);          //在tr节点插入姓名项td节点
        newnode.appendChild(newnc);          //在tr节点插入操作项td节点
        node.appendChild(newnode);           //在node中插入newnode(新的一行)
        
    }
    
     // 创建删除函数
    function dele(n)
     {
         var otest=document.getElementById("table");
         ostest.removeChild(ostest.childNodes[n]);
     }
  </script> 
 </head> 
 <body> 
       <table border="1" width="50%" id="table">
       <tr id="0">
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
       </tr>  
       <tr id="1">
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" onclick="dele(1)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>
       <tr id="2">
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="dele(2)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
       </tr>  
       </table>
       <input type="button" value="添加一行"  onclick="add()"/>   <!--在添加按钮上添加点击事件  -->
 </body>
</html>