谁帮我看看代码，郁闷很久了

源自：9-22 编程练习

谁帮我看看代码，郁闷很久了

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

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
         var rowList=document.getElementsByTagName("tr");
       for(var i=0;i<rowList.length;i++){
       changeColor(rowList[i]);
       }


   }
     function changeColor(obj){
         obj.onmouseover=function(){
             obj.style.backgrounColor="#f2f2f2";
         }
         obj.onmouseout=function(){
             obj.style.backgroundColor="#fff";
         }
     }
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
    function addRow(){
        var newRow=document.createElement("tr");
        var td1=document.createElement("td");
        var td2=document.createElement("td");
        var td3=document.createElement("td");
        td3.setAttribute("onClick","del(this)");
        td3.innerHTML="删除";
        td3.appendChild(text);
        newRow.appendChild(td1);
        newRow.appendChild(td2);
        newRow.appendChild(td3);
        var table=document.getElementByTagName("table");
        table.appendChild(newRow);
        changeColor(newRow);
    }


     // 创建删除函数
     function del(obj){
         var row=boj.parentNode.parentNode;
         row.parentNode.removeChild(row);
     }
</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="del(this)">删除</a></td>   
       </tr>
       <tr>
       <td>xh002</td>
       <td>刘小芳</td>
       <td><a href="javascript:;" onClick="del(this)">删除</a></td>   
       </tr>
       </table>
       <input type="button" value="添加一行" onClick="addRow()" />   
</body>
</html>

提问者：吃鸟的菜 2015-12-09 18:39

个回答

李晓健: 2015-12-09 18:49:39

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

            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
            var rowList=document.getElementsByTagName("tr");
            for(var i=0;i<rowList.length;i++){
                changeColor(rowList[i]);
            }


        }
        function changeColor(obj){
            obj.onmouseover=function(){
                obj.style.backgrounColor="#f2f2f2";
            }
            obj.onmouseout=function(){
                obj.style.backgroundColor="#fff";
            }
        }
        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
        function addRow(){
            var newRow=document.createElement("tr");
            var td1=document.createElement("td");
            var td2=document.createElement("td");
            var td3=document.createElement("td");
            var a = document.createElement('a');
            a.setAttribute("onClick","del(this)");
            a.innerHTML="删除";
            td3.appendChild(a);
            newRow.appendChild(td1);
            newRow.appendChild(td2);
            newRow.appendChild(td3);
            var table=document.getElementsByTagName("table")[0];
            table.appendChild(newRow);
            changeColor(newRow);
        }


        // 创建删除函数
        function del(obj){
            var row=obj.parentNode.parentNode;
            row.parentNode.removeChild(row);
        }
    </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="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>
    <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onClick="del(this)">删除</a></td>   <!--在删除按钮上添加点击事件  -->
    </tr>
</table>
<input type="button" value="添加一行" onClick="addRow()" />   <!--在添加按钮上添加点击事件  -->
</body>
</html>