问答详情
源自:9-22 编程练习

哪位大神帮我看看哪里错了,谢谢啦

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日常代码</title>
    <script type="text/javascript">
        window.onload = function(){
            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
             var tr = document.getElementsByTagName("tr");    //获取行tr
             for (var i = 0; i < tr.length; i++) {
                     changeColor(tr[i]);
                 }
        }
        //改变背景的函数
        function changeColor(obj){
            obj.mouseover = function(){
                obj.style.backgroundColor = "#f2f2f2";
            }
            obj.mouserout = function(){
                obj.style.backgroundColor = "#fff";
            }
        }

        // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
        var num = 2;
        function add(){
            num++;
            var tr = document.createElement("tr");    //创建一个tr标签
            var xh = document.createElement("td");    //创建一个td标签
            var xname = document.createElement("td");
            var xdel = document.createElement("td");

            xh.innerHTML = "xh" + num;
            xname.innerHTML = "小" + num;
            xdel.innerHTML = "<a herf='javascript:;' onclick='del(this)'>删除</a>";

            var tab = document.getElementById("table");    //获取table的ID值

            tab.appdenChild(tr);
            tr.appdenChild(xh);
            tr.appdenChild(xname);
            tr.appdenChild(xdel);

            var ter = document.getElementsByTagName("tr");
            for (var i = 0; i < ter.length; i++) {
                changeColor(ter[i]);
            }

        }
            
        
        // 创建删除函数
        function del(obj){
            var tr = obj.parentNode.parentNode;
            tr.parentNode.removeChild(tr);    
        }
    </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="add()" />    <!-- 在添加按钮上添加点击事件 -->
</body>
</html>

提问者:卿海棠 2018-10-11 23:24

个回答

  • 东哥Dongge
    2018-10-12 10:32:45
    已采纳

    onmouseover,onmouseout