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
>