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

请问各位:下面代码中add() 方法中的循环,在运行到最后一次的时候为什么会覆盖? 代码比较长,辛苦了!

<!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(){
        // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
            highLight();    
        }
        function highLight () {
            var trs = document.getElementsByTagName("tr");
            //添加属性
            for (var i = 0; i < trs.length; i ++) {
                if(trs[i].getAttribute("onmouseover") == null){
                    trs[i].setAttribute("onmouseover","this.style.backgroundColor='#EEE'");
                }
                if(trs[i].getAttribute("onmouseout") == null){
                    trs[i].setAttribute("onmouseout","this.style.backgroundColor='#FFF'");
                }
            }
        }
         
            // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
         function add () {
         
             var newtr = document.createElement("tr");
             var tr = document.getElementById("table").lastChild.appendChild(newtr);
             var td;

             /*
                问题: 下面的循环,当运行到最后一次时,会覆盖前面的appedChild. 为什么呢??????
             */

             for(var i = 0; i < 3; i ++) {
                if(i = 2){
                    td = document.createElement("td");
                     td.innerHTML = "<a href='javascript:;' onclick='remove(this)'>删除</a>";
                     tr.appendChild(td);
                     return;
                }
                 td = document.createElement("td");
                 td.innerHTML = "<input type='text' />";
                 tr.appendChild(td);

             highLight();
         }
                        
         
         // 创建删除函数
         function remove (obj) {
             var pOfTd = obj.parentNode.parentNode;
             var pOfTr = pOfTd.parentNode;
             pOfTr.removeChild(pOfTd);

         }


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

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

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