关于JS 表格操作鼠标移入移出tr背景变色的问题。

我想要的效果是，当鼠标移到表格的行上时，整行背景变色，鼠标移出时背景回到之前的颜色；
但是我这个弄出来。鼠标移入时背景是变了色的。但是移出时背景没有变色还是移入时变的那个颜色，求大神帮解决一下，并能说出我的问题出在哪里最好，谢谢哈；^_^`

下面是我的代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
          window.onload = function(){
              var otadb = document.getElementById('osd');
              var oblocolo =''; 
              for(var i=0;i<otadb.tBodies[0].rows.length;i++){
                  //下面是鼠标移到表格上时整行背景变色，当鼠标离开时整行背景回到原来的颜色；
                  otadb.tBodies[0].rows[i].onmousemove = function(){
                      oblocolo=this.style.backgroundColor;
                      this.style.backgroundColor = '#552940';
                  };
                  otadb.tBodies[0].rows[i].onmouseout = function(){
                      this.style.backgroundColor =oblocolo;
                  }
                  
                  //下面的代码是背景隔行变色
                  if(i % 2 == 0){
                      otadb.tBodies[0].rows[i].style.backgroundColor = '#ccc';
                  }
                  else{
                      otadb.tBodies[0].rows[i].style.backgroundColor = '';
                      
                  }
              };
          };
        </script>
    </head>
        <body>
        <table id="osd" border="1" width="500">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>年龄</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>01</td>
                    <td>张三</td>
                    <td>男</td>
                    <td>21</td>
                </tr>
                <tr>
                    <td>02</td>
                    <td>李四</td>
                    <td>男</td>
                    <td>23</td>
                </tr>
                <tr>
                    <td>03</td>
                    <td>张伟</td>
                    <td>男</td>
                    <td>30</td>
                </tr>
                <tr>
                    <td>04</td>
                    <td>赵翰义</td>
                    <td>男</td>
                    <td>40</td>
                </tr>
                <tr>
                    <td>05</td>
                    <td>周伟</td>
                    <td>男</td>
                    <td>35</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

这个不需要js，在ie8下用tr:hover就有效果，简单方便

otadb.tBodies[0].rows[i].onmouseenter = function(){ //这里要用onmouseenter，因为如果是onmousemouse，oblocolo将会变成你后来设置的值。
  oblocolo=this.style.backgroundColor;
  this.style.backgroundColor = '#552940';
};

关键点在onmouseenter；另外这个只需要css的:hover选择器就可以实现效果了

很简单，因为你事件用错了，把 onmousemove 改成 onmouseenter 就行了╮(╯▽╰)╭

因为你 onmousemove 是在内部移动的时候不断触发，所以把 oblocolo 改成了 #552940 所以 onmouseout 时会改不回来...

【热门文章】