Asp.net GridView隔行变色和光棒效果2种方法实现

方法一：前台和后台配合使用
1.aspx 隔行变色属性（<alternatingrowstyle backcolor="#f5f5f5" />）

<asp:gridview id="gvprojectlist" runat="server"
onrowcreated="gvprojectlist_rowcreated">
<alternatingrowstyle backcolor="#f5f5f5" />
</asp:gridview>

1.aspx.cs 后台事件中设置鼠标至于某行上的变色效果

protected void gvprojectlist_rowcreated(object sender, gridviewroweventargs e)
{
e.row.attributes.add("onmouseover", "currentcolor=this.style.backgroundcolor;this.style.backgroundcolor='#eaeaea';");//这是鼠标移到某行时改变某行的背景
e.row.attributes.add("onmouseout", "this.style.backgroundcolor=currentcolor;");//鼠标移走时恢复
}

方法二：jquery方式
1.aspx
首先引用 jquery 函数库,在http://jquery.com/ 下载，然后写css样式，再加入js代码。

<script src="jquery-1.5.2.min.js" type="text/javascript"></script>

<style type="text/css">
.even {
background:#f5f5f5;
}
.odd {
background:#ffffff;
}
.over{
background:#cde6ff;
}
.tr_chouse {
background:#6ab1ff;
}
</style>

<script type="text/javascript">
$(document).ready(function(){
$(".gridview tr:odd").addclass("odd"); //奇数行设定为 "odd" 样式
$(".gridview tr:even").addclass("even"); //偶数行设定为 "even" 样式
$(".gridview tr").mouseover(function(){$(this).addclass("over");}) //当 mouseover 时加入 "over" 样式
.mouseout(function(){$(this).removeclass("over");}) //当 mouseout 时移除 "over" 样式
.click(function(){$(this).toggleclass("tr_chouse");}) //当 click 加入或移除 "tr_chouse" 样式，实现数据列选取
});
</script>

【2013年2月18日 13:57:30更新】

<script type="text/javascript">
$(function(){ $(".maingrid_text tr:even").addclass("even"); $(".maingrid_text tr:odd").addclass("odd");
$(".maingrid_text tr").hover(function(){$(this).addclass("table_hover")},function(){$(this).removeclass("table_hover")});
});
function endrequesthandler(){
$(function(){ $(".maingrid_text tr:even").addclass("even"); $(".maingrid_text tr:odd").addclass("odd");
$(".maingrid_text tr").hover(function(){$(this).addclass("table_hover")},function(){$(this).removeclass("table_hover")});
});
}
function reload(){sys.webforms.pagerequestmanager.getinstance().add_endrequest(endrequesthandler);}
$(document).ready(function() { reload(); })
</script>