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

为什么我的“删除和添加”部分运行良好,却改不了背景颜色？window.onload=function()这部分代码有问题吗？

<!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()
      {
        for(var i=0;i<tr.length;i++)
        {
            tr[i].onmouseover=function()
            {
                 tr[i].style.backgroundColor="#f22";
            }

           tr[i].onmouseout= function()
           {
               tr[i].style.backgroundColor="#ddd";
           }
        }
      }
    function add()
     {
         var tabl=document.getElementById("table");
         var btn=document.createElement("tr");
         var btn1=document.createElement("th");
         var btn2=document.createElement("th");
         var btn3=document.createElement("th");
          btn1.innerHTML="xh003";
          btn2.innerHTML="张小节";
          tabl.appendChild(btn);
          btn.appendChild(btn1);
          btn.appendChild(btn2);
          btn.appendChild(btn3);
     }

     // 创建删除函数
     function cancel()
     {
        var otest=document.getElementById("id1");
        var len=otest.childNodes.length;
        for(var i=0;i<len;i++)
        otest.removeChild(otest.childNodes[0]);
     }

     function canc()
     {
        var test=document.getElementById("id2");
        var leng=test.childNodes.length;
        for(var i=0;i<leng;i++)
        test.removeChild(test.childNodes[0]);
     }

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

       <tr id="id1">
       <td>xh001</td>
       <td>王小明</td>
       <td><a href="javascript:;" onclick="cancel()">删除</a></td>
       
       </tr>

       <tr id="id2">
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:;" onclick="canc()" >删除</a></td>
       
       </tr>

       </table>
       <input type="button" value="添加一行" onclick="add()" />   
</body>
</html>