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

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

<!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

源自：JavaScript进阶篇 9-22

关注问题我要回答

597

操作

收起

1 回答

李晓健
2015-12-09

<!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>