脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → ASP.NET → 实用技巧 → GridView隔行变色

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

 更新时间：2013年04月07日 16:42:07   作者：  
两种方法实现GridView隔行变色和光棒效果:前台和后台配合使用及JQuery方式，感兴趣的朋友可以参考下哈，希望可以帮助到你
方法一：前台和后台配合使用
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>
您可能感兴趣的文章:

相关文章

  • c#加密类使用方法示例

    c#加密类使用方法示例

    这篇文章主要介绍了c#加密类使用方法,大家可以参考使用
    2013-11-11
  • .NET Core企业微信网页授权登录的实现

    .NET Core企业微信网页授权登录的实现

    本文主要介绍了.NET Core企业微信网页授权登录的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-04-04
  • 水晶报表asp.net的webform下基本用法实例

    水晶报表asp.net的webform下基本用法实例

    这篇文章主要介绍了水晶报表asp.net的webform下基本用法,实例讲述了asp.net中水晶报表的创建与使用方法,非常具有实用价值,需要的朋友可以参考下
    2014-11-11
  • Ajax.net 显示错误信息的设置

    Ajax.net 显示错误信息的设置

    有时候我们在使用asp.net想让他显示出错的原因等情况，大家可以仔细看下参数，属性等
    2009-01-01
  • Ajax.net Sys未定义错误解决办法

    Ajax.net Sys未定义错误解决办法

    用Asp.net2.0开发的系统，使用了Ajax技术，在本地没有任何问题！但是发布到Web托管服务器上后，系统总是出现“Sys 未定义”的错误！
    2008-09-09
  • c# 操作符?? null coalescing operator

    c# 操作符?? null coalescing operator

    ?? "null coalescing" operator 是c#新提供的一个操作符，这个操作符提供的功能是判断左侧的操作数是否是null,如果是则返回结果是右侧的操作数;非null则返回左侧的操作数。
    2009-06-06
  • .net获取硬件信息_CPU序列号

    .net获取硬件信息_CPU序列号

    .net获取硬件信息_CPU序列号的实现代码
    2009-07-07
  • Asp.net Web Api实现图片点击式图片验证码功能

    Asp.net Web Api实现图片点击式图片验证码功能

    现在验证码的形式越来越丰富，今天要实现的是在点击图片中的文字来进行校验的验证码。下面通过本文给大家分享Asp.net Web Api实现图片点击式图片验证码功能，需要的的朋友参考下吧
    2017-06-06
  • asp.net注册Javascript的方法

    asp.net注册Javascript的方法

    今天在cnblogs上看到有关注册Javascript，主要是用到了ClientScript的三个方法。
    2008-07-07
  • .Net Core中使用ExceptionFilter过滤器的方法

    .Net Core中使用ExceptionFilter过滤器的方法

    这篇文章主要介绍了.Net Core中使用ExceptionFilter过滤器的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论