日期:2014-05-16  浏览次数:20381 次

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