js 鼠标移动更换表格背景行颜色的问题

在ie8下面，在表格的一行中来回移动，在经过td与td之间的时候，总会有背景色闪烁一下的情况..不知道谁对于更换表格行背景颜色有什么好的办法。

解决方案 »

  1.   

    给tr添加 mouseover mouseout 事件改变backgroundColor
      

  2.   

    火狐下给tr增加事件可以  ie下不知为什么会闪 和冒泡之类的有关？
      

  3.   

    css那么强大不用搞js不麻烦啊？
    楼主给你写了个小例子
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
       <title></title>
       <style type="text/css">
       .tab
       {
        width:1000px; height:600px;
        }
        .tab tr:hover
        {
         background-color:Red;
        }
       
       </style>
    </head>
    <body >
    <table border="1"  class="tab" >
    <tr >
    <td>123</td>
    <td>123</td>
    </tr>
    <tr >
    <td>123</td>
    <td>123</td>
    </tr>
    <tr >
    <td>123</td>
    <td>123</td>
    </tr>
    <tr >
    <td>123</td>
    <td>123</td>
    </tr>
    <tr >
    <td>123</td>
    <td>123</td>
    </tr>
    </table>
    </body></html>
      

  4.   

    .select{
        background: #0066FF;
    }$("tbody>tr").mouseover(function(){
        $(this).addClass("select");
    })$("tbody>tr").mouseout(function(){
        $(this).removeClass("select");
    });
      

  5.   


    <script>
    function trBg(){
    var tab=document.getElementById("table");
    var tr=tab.getElementsByTagName("tr");
    for(var i=0;i<tr.length;i++){
    if(i%2==0){
    tr[i].style.backgroundColor="#fff";

    tr[i].onmouseover=function(){
    this.style.background="red";
    };
    tr[i].onmouseout=function(){
    this.style.background="#fff";
    }
    }else{
    tr[i].style.backgroundColor="#fff";

    tr[i].onmouseover=function(){
    this.style.background="red";
    };
    tr[i].onmouseout=function(){
    this.style.background="#fff";
    }
    }
    }
    }
    window.onload=trBg;
    </script><table id="table" border="1" width="400">
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    <td>44444</td>
    <td>55555</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    <td>44444</td>
    <td>55555</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    <td>44444</td>
    <td>55555</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    <td>44444</td>
    <td>55555</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    <td>44444</td>
    <td>55555</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    <td>44444</td>
    <td>55555</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    <td>44444</td>
    <td>55555</td>
    </tr>
    <tr>
    <td>11111</td>
    <td>22222</td>
    <td>33333</td>
    <td>44444</td>
    <td>55555</td>
    </tr>
    </table>大家可以试一下这个例子..这个例子就是我说的这种情况..鼠标在同一行之间移动，会出现闪动的情况...
      

  6.   

    <table id="table" border="1" width="400" cellspacing="0" cellpadding="0">
      

  7.   

    经测试 没问题
    <script>
                function trBg(){
                    var tab=document.getElementById("table");
                    var tr=tab.getElementsByTagName("tr");
                    for(var i=0;i<tr.length;i++){
                        if(i%2==0){
                            tr[i].style.backgroundColor="#fff";
                            
                            tr[i].onmouseover=function(){
                                this.style.background="red";
                            };
                            tr[i].onmouseout=function(){
                                this.style.background="#fff";
                            }    
                        }else{
                            tr[i].style.backgroundColor="#fff";
                            
                            tr[i].onmouseover=function(){
                                this.style.background="blue";
                            };
                            tr[i].onmouseout=function(){
                                this.style.background="#fff";
                            }
                        }
                    }
                }
            window.onload=trBg;
    </script>
    <table id="table" border="1" width="400" cellspacing="0" cellpadding="0">
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
            <td>55555</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
            <td>55555</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
            <td>55555</td>    
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
            <td>55555</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
            <td>55555</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
            <td>55555</td>
        </tr>
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
            <td>55555</td>
        </tr>    
        <tr>
            <td>11111</td>
            <td>22222</td>
            <td>33333</td>
            <td>44444</td>
            <td>55555</td>
        </tr>
    </table>
      

  8.   

    ie6没问题，用火狐、360也没问题..就是ie8不行..
      

  9.   

    这边 ietester 测试没问题
      

  10.   

    我刚用ietester试了下也没问题...但用浏览器测就不行..纠结了..谁有好的变换行背景的代码也可以提供下..万分感谢..
      

  11.   

       强烈推荐：
    function changTo(id){
    id.style.backgroundColor='#E1CF9F';
    }
    function changBack(id){
    id.style.backgroundColor='';
    }<tr onmouseover="changTo(this)" onmouseout="changBack(this)">
    </tr>