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

来源:9-22 编程练习

卿海棠

2018-10-11 23:24

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

写回答 关注

1回答

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

    onmouseover,onmouseout

    卿海棠

    兄弟,我的添加代码哪里还有错误吗? 帮我看下,谢谢

    2018-10-12 11:44:29

    共 2 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468192 学习 · 21891 问题

查看课程

相似问题