前几天在博问里发现有人问关于 GridView点击行变色 的问题，突然想起很久很久以前，写过一篇文章 一个简单但常用的表格样式－－鼠标划过行变色－－简洁实现 ，是关于表格行颜色交替和鼠标指向时变色的，正好今天把那一篇补充和扩展一下，加上鼠标点击选择（其实只是点击后变个颜色，“选择”这个词在这里不合适），顺便把这个直接应用到GridView上，如果是其他的控件，或者直接的HTML，稍加修改也可以用上，这里仅提供一个思路。虽然GridView 使用AlternatingRowStyle提供了交替行背景色的问题，但这个东西用着实在不爽，看它生成到HTML的那个table，那叫一个乱啊。
%Q"f(Dg4Xx9x0
ITPUB个人空间d+JW n C.f F
下面是代码，注释应该还算比较详细，比较适合初学者，可以把下面两个文件的代码直接复制到你的项目中直接执行。最下面有文件的下载地址，也可以直接下载后运行，代码在IE7和Firefox2下测试通过，有任何问题，请在下面留言，我将尽量及时回复。
H _4^0{ P0
ITPUB个人空间)\]ve3e*|c a%L-W
BackgroundColor.aspx
nl3i)jr Z0
主要包含一个GridView，是我们折腾的重点对象，还有一堆javascript，是我们折腾GridView的手段
ITPUB个人空间0d
S,Y^{ X1]?-a
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="BackgroundColor.aspx.cs" Inherits="_BackgroundColor" %>
E X-i
V'S#@hm0
.P @!G*M
H
d_0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
8Bt^Y)OG0
g R8p U6z3o0
<html xmlns="http://www.w3.org/1999/xhtml">
ITPUB个人空间8D|.XW&i0|ZE
<head>
ITPUB个人空间e
d|a[)u
<title>BackgroundColor</title>
j p&i1j
@/|,i0i0
</head>
ITPUB个人空间3`E,T@tLw
<body>
ITPUB个人空间:\%Jp/_-v g {|.`
<form id="form1" runat="server">
ITPUB个人空间+E
rfTL5d
<asp:GridView runat="server" ID="gvMeiMingZi"></asp:GridView>
L-a ],n/c$w)C0
</form>
ITPUB个人空间"h:W#B!D+X e b
<script type="text/javascript">
E x#J ^{4P0
//把事件放在onload里，因为我不知道JS如果直接写到这儿是不是会等页面加载完才执行
ITPUB个人空间4Z @w&v,Se
//使用<%=%>方式输出GridView的ID是因为某些情况下（如使用了MasterPage）会造成HTML中ID的变化
Q8a,D mW0
//颜色值推荐使用Hex，如 #f00 或 #ff0000
2n*Q |1yP%]0
window.onload = function(){
(C(i6W @!n0
GridViewColor("<%=gvMeiMingZi.ClientID%>","#fff","#eee","#6df","#fd6");
f a^S/~
n'p6~"@2[2N0
}
W;[fSzBLP j0
|A;@}+RCY4y#~)N0
//参数依次为（后两个如果指定为空值，则不会发生相应的事件）：
7g }8eQSsW'pa0
//GridView ID, 正常行背景色,交替行背景色,鼠标指向行背景色,鼠标点击后背景色
X^C\V
o0
function GridViewColor(GridViewId, NormalColor, AlterColor, HoverColor, SelectColor){
Bk+w;|`'{
\0
//获取所有要控制的行
ITPUB个人空间R7uN R7o S j$[y6Y
var AllRows = document.getElementById(GridViewId).getElementsByTagName("tr");
(`4iW9a"lOJ0
ITPUB个人空间2u/U u"Rh+`
//设置每一行的背景色和事件，循环从1开始而非0，可以避开表头那一行
ITPUB个人空间 Hm_9m~
for(var i=1; i<AllRows.length; i++){
h6n0ss9x.F ~0
//设定本行默认的背景色
l}T{*GoW0
AllRows
.style.background = i%2==0?NormalColor:AlterColor;
T N&Xj)[m^Cm0
4E%r2Q ]L0
//如果指定了鼠标指向的背景色，则添加onmouseover/onmouseout事件ITPUB个人空间
M4wm W k2j2y/|8\n
//处于选中状态的行发生这两个事件时不改变颜色
&l_U"L8NL9I0b0
if(HoverColor != ""){
#c [Fn ysH T&e0
AllRows.onmouseover = function(){if(!this.selected)this.style.background = HoverColor;}ITPUB个人空间 n)w tjs } L
if(i%2 == 0){ITPUB个人空间4m]%X;iR
AllRows.onmouseout = function(){if(!this.selected)this.style.background = NormalColor;}ITPUB个人空间#~!w3L3LA&_q,?
}ITPUB个人空间7N6W} SgT
else{
6L/Ai%G7Q2iWu1^^0
AllRows.onmouseout = function(){if(!this.selected)this.style.background = AlterColor;}
u,rX!Zv8U~@0
}
-KT/DH)e{0
}ITPUB个人空间&| ~}kaDBr1J!?3D9{
@\+A4S,w:v0
//如果指定了鼠标点击的背景色，则添加onclick事件ITPUB个人空间&v4d$IthJ#C*c @.[
//在事件响应中修改被点击行的选中状态
)DVleE P0
if(SelectColor != ""){
a:F b$}dB0
AllRows.onclick = function(){
/[3p*[ZJT,Y$D dV0
this.style.background = this.style.background==SelectColor?HoverColor:SelectColor;ITPUB个人空间OPd*I"n0g6T
this.selected = !this.selected;
3E4Q J _&b h `0
}
_'Cg^'jc'h0
}ITPUB个人空间5K*`;b p g)`$b}s
}
h,`?4rM!FC/u0
}
!Z|5RrQ1dn6w(E0
</script>
YD `'["f| oV0
</body>
z(v2^5zc'zr0
</html>ITPUB个人空间2g#ROmPr){
m H.AY v,W Y0
BackgroundColor.aspx.csITPUB个人空间8q4VC'N4f+v
用于生成一堆用于测试的数据，不然前面的GridView里啥也没有，就看不出效果了ITPUB个人空间 c!y l/I0W C:{U+[IX
using System;ITPUB个人空间+E4z/Y
[9ML
using System.Data;ITPUB个人空间.yL^"L+g1Sb
ITPUB个人空间 Ht6Ixi1@"c-m|F
public partial class _BackgroundColor:System.Web.UI.PageITPUB个人空间)i b6_xA&xE6J
{
s3l j:\)['?*\n0
protected void Page_Load(object sender, EventArgs e)
Ar \ lk$r[0sT0
{ITPUB个人空间 yF&Ob7wc3n
//生成DataTable并添加10个列
-| T#D__"Z.R{!{A0
DataTable dt = new DataTable();
,J6R3?!A8wM gd@s,UU0
for(int i = 0; i < 10; i++)ITPUB个人空间|+z*v!~#m8|
E
u
{ITPUB个人空间 f
T f]2i r.q
dt.Columns.Add();
:i#y#@j'WT!u
n0
}ITPUB个人空间]!B`&qx nP[[ P:f A
4T&[5k9b(vJ2s0
//往DataTable里添加20行数据ITPUB个人空间:P:CT%Z JFqlm7h
for(int i = 0; i < 20; i++)
J+n0oyTs0
{
j-] b Gv QE#t] D:w0
dt.Rows.Add(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);ITPUB个人空间7Z)|T4u!h*y
T(a
}ITPUB个人空间+p&ze]8Ve
VYq)Y,c"L1~:F Pn0
//将DataTable绑定到GridView
d-\ X
L/| Ug0
gvMeiMingZi.DataSource = dt;
1H ?x(C | @3W6x?0
gvMeiMingZi.DataBind();
n
M4v$G0Q LL:k#_
_n0
}
T,F:@wYE+FQ3a
t&T0
}
mosticy
发布于2008-05-20 14:43:16
zyzdy
发布于2008-05-25 16:34:20
therwise>
