注释鼠标移动改变背景处的下面有一段注释的代码，请大神帮我看看，为什么不能运行呢？-慕课网

注释鼠标移动改变背景处的下面有一段注释的代码，请大神帮我看看，为什么不能运行呢？

来源：9-22 编程练习

Wo_o明

2016-01-27 21:22

<!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 move=document.getElementsByTagName("tr");
        /*for(var i=0;i<=move.length;i++)
        {
            move[i].onmouseover=function(){
            move[i].style.backgroundColor="#f2f2f2";
            }
            move[i].onmouseout=function(){
                move[i].style.backgroundColor="#fff";
            }
        }*/
        //注释的这段代码有什么问题？为什么不能运行呢？而且为什么不能把function给去掉，用onmouseout/onmouseover直接被赋值相关属性呢，而是要采用函数的方式进行赋值？
        for(var i=0;i<move.length;i++)
        {
            bgcChange(move[i]);
        }
      }
        function bgcChange(a)
     {
        a.onmouseover=function(){
            a.style.backgroundColor="#f2f2f2";
        }
        a.onmouseout=function(){
            a.style.backgroundColor="#fff";
        }
     }
      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；
      function adder(){
          var tr=document.createElement("tr");//添加行标签元素
          var td=document.createElement("td");//添加列标签元素
          var td1=document.createElement("td");//添加列标签元素
          tr.appendChild(td);//添加列节点
          tr.appendChild(td1);//添加列节点
          var tb=document.getElementById("table");//获取父节点
          tb.appendChild(tr);//添加行节点
          var td3=document.createElement("td");//添加列标签元素
          td3.innerHTML='<a href="javascript:;" onclick="del(this)">删除</a>';
          tr.appendChild(td3);
          var i=prompt("请输入学号","");
          var j=prompt("请输入姓名","");
          if(i!=null&&i!=""&&j!=null&j!="")
          {
              td.innerHTML=i;
              td1.innerHTML=j;
          }else{
              alert("请重新输入");
          }
      }


     // 创建删除函数
     function del(a){
         var tb=a.parentNode.parentNode.parentNode;//父标签
         var tr=a.parentNode.parentNode//行标签
         tb.removeChild(tr);
     }

</script>
</head>
<body>
    <table border="1" width="50%" id="table">
    <tr>
  <th>学号</th>
  <th>姓名</th>
  <th>操作</th>
    </tr>

</table>
<input type="button" value="添加一行" onclick="adder()" /> 
</body>
</html>

写回答关注

1回答

Neil丶

2016-01-28 23:04:35

已采纳

你注释那段错误在于i<=move.length，因为你前面i从0开始；如果你把move[i].style.backgroundColor中的move[i]改为this也能正常运行。至于你后面问的为什么不能直接给onmouseover/onmouseout直接赋属性的问题，我想应该是因为你的事件是写在外面的，如果是行内鼠标移入/移除事件，就可以直接写。个人理解。

1 0

Wo_o明

非常感谢！

2016-01-29 14:27:06

共 1 条回复 >

JavaScript进阶篇

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

468060 学习 · 21891 问题

查看课程

相似问题

关于事件绑定的，为什么注释处的代码能执行，没有注释的不能？

回答 2

为什么行不随着鼠标的移动而改变背景颜色

回答 1

看下注释代码

回答 4

移动鼠标改变背景颜色，以下代码存在什么问题？

回答 2

鼠标移动到行上背景颜色没有变化，求大神解答

回答 1

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