js添加onmouseover/out无效？

源自：9-22 编程练习

js添加onmouseover/out无效？

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

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

提问者：sha_3shayu 2017-04-06 20:02

个回答

qq_有内涵_0

2017-04-07 14:09:16

已采纳

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

0
sha_3shayu

2017-04-24 16:38:34

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

0
sha_3shayu

2017-04-08 11:09:42

这里显示参数没传进去呐

0