客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
方法一：前台和后台配合使用 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> |
请发表评论