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])};

    sha_3s...

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

    2017-04-08 11:05:18

    共 1 条回复 >

  • sha_3shayu
    2017-04-24 16:38:34

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

    前端小学生a

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

    2017-05-19 16:10:23

    共 1 条回复 >

  • sha_3shayu
    2017-04-08 11:09:42

    http://img.mukewang.com/58e8546100014b2419281048.jpg

    这里显示参数没传进去呐

JavaScript进阶篇

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

468868 学习 · 22582 问题

查看课程

相似问题