js添加onmouseover/out无效？-慕课网

js添加onmouseover/out无效？

来源：9-22 编程练习

sha_3shayu

2017-04-06 20:02

<!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 trNodeList = document.getElementsByTagName("tr");
            for (var i=0; i<trNodeList.length; i++){
                trNodeList[i].onmouseout = resetColor(trNodeList[i]);
            }
            for (var i=0; i<trNodeList.length; i++){
                trNodeList[i].onmouseover = changeColor(trNodeList[i]);
            }
        }
        function resetColor(obj) {
            obj.style.backgroundColor = "gray";
        }
        function changeColor(obj) {
            obj.style.backgroundColor="red";
        }


//
//        window.onload = function(){
//            var tr=document.getElementsByTagName("tr");
//            for(var i= 0;i<tr.length;i++)
//            {
//                bgcChange(tr[i]);
//            }
//            // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。
//        }
//        function bgcChange(obj)
//        {
//            obj.onmouseover=function(){
//                obj.style.backgroundColor="#f2f2f2";
//            }
//            obj.onmouseout=function(){
//                obj.style.backgroundColor="#fff";
//            }
//        }

        // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

        function  addStudent() {
            var table  = document.getElementsByTagName("table")[0];
            var newTr = document.createElement("tr");

            var newTd1 = document.createElement("td");
            var newTd2 = document.createElement("td");
            var newTd3 = document.createElement("td");

            var newA = document.createElement("a");
            newA.setAttribute("href", "javascript:(this);");
            newA.setAttribute("onclick", "deleteTr(this)");
            newA.innerHTML = "delete";

            newTd3.appendChild(newA);

            newTr.appendChild(newTd1);
            newTr.appendChild(newTd2);
            newTr.appendChild(newTd3);

            table.appendChild(newTr);
        }

        // 创建删除函数
        function deleteTr(obj) {
            var tr = obj.parentNode.parentNode;
            var ta = tr.parentNode;
            ta.removeChild(tr);
            tr= null;
        }


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

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

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

这里的为什么是无效的，该怎么改呢？

写回答关注

3回答

qq_有内涵_0

2017-04-07 14:09:16

已采纳

trNodeList[i].onmouseout = resetColor(trNodeList[i]);
这样写是不对的。应该是：
trNodeList[i].onmouseout = function(){resetColor(trNodeList[i])};

1 0

sha_3s...

这样写不行呐，参数传不进去

2017-04-08 11:05:18

共 1 条回复 >
sha_3shayu

2017-04-24 16:38:34

解决了，变量作用域的问题

1 0

前端小学生a

解释一下，你是怎么出错的

2017-05-19 16:10:23

共 1 条回复 >
sha_3shayu

2017-04-08 11:09:42

这里显示参数没传进去呐

0 0

JavaScript进阶篇

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

468940 学习 · 22582 问题

查看课程

相似问题

添加onmouseover和onmouseout事件相关问题

回答 4

onmouseover添加到div中怎么就不行了呢

回答 2

js添加鼠标事件

回答 2

事件无法添加

回答 2

添加一行无效，，不知道哪错了，帮看下，谢谢

回答 1

打开慕课网App查看更多内容