jquery统制表格鼠标经过变色和奇偶行变色

jquery控制表格鼠标经过变色和奇偶行变色
GridView1是html表格的id
tbgcolor、tbgcolor1、tbgcolor2分别是三种样式

1.数据行tr隔行颜色区分
2.当鼠标经过数据行tr时，当前行变成另外一种颜色，离开时又恢复

以下是代码：

                $("#GridView1 tr").mouseover(function() {   
                         $(this).addClass("tbgcolor");  
                    }, function() {   
                        $(this).removeClass("tbgcolor");    
                    })  
                    
                    $("#GridView1 tr:even").addClass("tbgcolor1"); 
                    $("#GridView1 tr:odd").addClass("tbgcolor2"); 

现在碰到的问题是：
tr隔行颜色是起作用的，就是$("#GridView1 tr:even")、$("#GridView1 tr:odd")这两段代码是执行的，但是鼠标经过的事件mouseover没响应。

但当我把$("#GridView1 tr:even")、$("#GridView1 tr:odd")去掉的话，事件mouseover却是起作用的，似乎把它们放一块的话只执行了隔行变色的代码，鼠标经过的没执行，这不知道是什么原因，请大家帮忙看看呀？

[解决办法]

引用:

GridView1是html表格的id
tbgcolor、tbgcolor1、tbgcolor2分别是三种样式

1.数据行tr隔行颜色区分
2.当鼠标经过数据行tr时，当前行变成另外一种颜色，离开时又恢复

以下是代码：



JavaScript code
?



123456789

                $("#GridView1 tr").m……

html:

<table id="GridView1">
<tr><td>aaaaaa</td></tr>
<tr><td>bbbbbbbb</td></tr>
<tr><td>cccccccc</td></tr>
</table>

jquery:

$(document).ready(function() {
$("#GridView1 tr:even").addClass("tbgcolor1");
 $("#GridView1 tr:odd").addClass("tbgcolor2");
 $("#GridView1 tr").mouseover(function() {
            $(this).attr("class", "tbgcolor");
        });
 $("#GridView1 tr").mouseout(function() {
            $(this).removeClass("tbgcolor");
            $("#GridView1 tr:even").addClass("tbgcolor1");
            $("#GridView1 tr:odd").addClass("tbgcolor2");
        });
})

查看更多 下一篇