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>

赞 (0)

相关推荐

  • asp.net GridView控件鼠标移动某行改变背景颜色(方法一)

    asp.net GridView控件鼠标移动某行改变背景颜色(方法一)

    复制代码 代码如下: using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Syste

  • 对GridView的行加颜色并弹出Kindeditor的实现思路

    前台代码: 复制代码 代码如下: <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> function tureDelete() { if (c

  • js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色

    后台代码 复制代码 代码如下: /// <summary> /// 数据行绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e) {

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

    方法一:前台和后台配合使用 1.aspx 隔行变色属性(<AlternatingRowStyle BackColor="#f5f5f5" />) 复制代码 代码如下: <asp:GridView ID="gvProjectList" runat="server" OnRowCreated="gvProjectList_RowCreated"> <AlternatingRowStyle BackCo

  • asp.net下让Gridview鼠标滑过光棒变色效果

    复制代码 代码如下: //光棒效果 protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType == DataControlRowType.DataRow) { e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.back

  • JavaScript和jQuery制作光棒效果

    使用javaScript与jQuery添加CSS样式的区别和步骤 使用javaScript制作光棒效果 --首先是javaScript <script> $(function () { var lis = document.getElementsByTagName("li"); //定义DOM变量接受标签为li的元素 for (var i = 0; i < lis.length;i++){ lis[i].onmouseover = function () { //方式

  • ASP.Net中利用CSS实现多界面的两种方法

    本文实例讲述了ASP.Net中利用CSS实现多界面的两种方法.分享给大家供大家参考.具体实现方法如下: 可以通过使页面动态加载不同CSS来实现多界面的效果: 方法一: 复制代码 代码如下: <%@page language="C#"%> <%@import namespace="System.Data"%> <script language="c#" runat="server"> publ

  • asp.net实现图片以二进制流输出的两种方法

    本文实例讲述了asp.net实现图片以二进制流输出的两种方法.分享给大家供大家参考,具体如下: 方法一: System.IO.MemoryStream ms = new System.IO.MemoryStream(); System.IO.Stream str = new FileUpload().PostedFile.InputStream; System.Drawing.Bitmap map = new System.Drawing.Bitmap(str); map.Save(ms, Sy

  • asp.net gridview的Rowcommand命令中获取行索引的方法总结

    一.通过命令源获取当前行索引. 方法比较多, GridView 的 Command 事件中无法象 DataGrid 那样直接获取行, 法1, GridViewRow drv = ((GridViewRow)(((Button)(e.CommandSource)).Parent.Parent));//CommandSource 引起事件的命令源,(疑问,根据MSDN说的是GridView,如果这样的话这样操作是错误的,但我得到的确实正确的,那说明得到的是BUtton控件,等待以后查证). drv.

  • ASP.NET获取真正的客户端IP地址的6种方法

    在ASP中使用 Request.ServerVariables("REMOTE_ADDR") 来取得客户端的IP地址,但如果客户端是使用代理服务器来访问,那取到的就是代理服务器的IP地址,而不是真正的客户端IP地址. 要想透过代理服务器取得客户端的真实IP地址,就要使用 Request.ServerVariables("HTTP_X_FORWARDED_FOR") 来读取. 不过要注意的事,并不是每个代理服务器都能用 Request.ServerVariables(

  • asp下用实现模板加载的的几种方法总结 原创

    1.使用adodb.stream实现的 一般虚拟主机都提供 复制代码 代码如下: function loadtempletfile(byval path)       on error resume next       dim objstream       set objstream = server.createobject("adodb.stream")       with objstream           .type = 2           .mode = 3  

  • ASP.NET Core中调整HTTP请求大小的几种方法详解

    一.前言 之所以称ASP.NET Core是一个Web开发平台,源于它具有一个极具扩展性的请求处理管道,我们可以通过这个管道的定制来满足各种场景下的HTTP处理需求.ASP. NET Core应用的很多特性,比如路由.认证.会话.缓存等,也同时定制消息处理管道来实现的.我们甚至可以通过管道定制在ASP.NET Core平台上创建我们自己的Web框架,实际上MVC和SingalR这两个重要的Web框架也是采用这样的方式创建的. HTTP协议自身的特性决定了任何一个Web应用的工作方式都是监听.接收

  • 利用JS动态生成隔行换色HTML表格的两种方法

    用JS生成动态生成表格,行.列由用户输入,并使表格隔行换色 方法一. 代码: <!DOCTYPE html> <html> <head> <title>动态表格</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description"

随机推荐