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却是起作用的,似乎把它们放一块的话只执行了隔行变色的代码,鼠标经过的没执行,这不知道是什么原因,请大家帮忙看看呀?
------解决方案--------------------
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");
});
})