实现Asp.net GridView隔行变色和光棒效果的方法
来源：爱站网时间：2019-09-05编辑：网友分享
对于实现Asp.net GridView隔行变色和光棒效果的方法大家了解多少呢？对于很多初学者们来说这是一个难题，那么下面我们就一起去看看Asp.net GridView隔行变色和光棒效果2种实现方法。
对于实现Asp.net GridView隔行变色和光棒效果的方法大家了解多少呢？对于很多初学者们来说这是一个难题，那么下面我们就一起去看看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更新】
实现Asp.net GridView隔行变色和光棒效果的方法有两种，主要为前台和后台配合使用及JQuery方式，感兴趣的朋友可以参考下哈，希望可以帮助到你！
