读书人

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

发布时间: 2013-02-04 10:50:22 作者: rapoo

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


读书人网 >JavaScript

热点推荐