管理资源吧首页>>>教程>>>编程>>>ASP.NET教程>>>

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>

教程首页 更多教程