jQuery操作Gridview全选,点击checkbox变色，隔行变色，鼠标悬停变色！
公司以前是用纯Js写的，有些情况还会出问题，而且不好调试，干脆直接给改了！感觉还是比较简洁的！
直接代码：
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.AlterColor
{
background-color: #edf1f8;
}
.NormalColor
{
background-color: #f7f6f3;
}
.HoverColor
{
background: #d7e3f6; /*这个将是鼠标高亮行的背景色*/
cursor: pointer;
}
.SelectColor
{
background-color: #d8e7b0; /*这个将是选中高亮行的背景色*/
cursor: pointer;
}
</style>
<script src="../JavaScript/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
//@author MaHaiBin
//@time 2011-6-10
$(function() {
gridview();
});
function gridview() {
//这个地方到时候获取一下gridview的客户端id
var gridviewId = "#gridview ";
//偶数行变色
$(gridviewId + ">tbody tr:even").addClass("NormalColor");
//奇数行变色n
$(gridviewId + ">tbody tr:odd").addClass("AlterColor");
//鼠标移上时变色 和 单击变色
$(gridviewId + ">tbody tr").hover(function() {
$(this).addClass("HoverColor");
}, function() {
$(this).removeClass("HoverColor");
}).click(function() {
//这个地方是或取得jQuery对象
var $check = $(this).find("input:checkbox");
if ($check.attr("checked")) {
$(this).addClass("SelectColor");
}
else {
$(this).removeClass("SelectColor");
}
});
//全选事件
$(gridviewId + "tr:first").find(":checkbox").click(function() {
if (this.checked) {
$(gridviewId + ">tbody tr").addClass("SelectColor").find("input:checkbox").attr("checked", true);
}
else {
$(gridviewId + ">tbody tr").removeClass("SelectColor").find("input:checkbox").attr("checked", false);
}
});
}
</script>
</head>
<body>
<form id="form1" method="post" action="Default2.aspx" runat="server">
<div>
<table id="gridview" style="width: 100%;">
<thead>
<tr>
<td>
<input type="checkbox" id="sss" />
第一行
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" id="Checkbox1" />
第二行
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox2" />
第三行
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox3" />
第四行
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox4" />
第五行
</td>
</tr>
<tr>
<td>
<input type="checkbox" id="Checkbox5" />
第六行
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
