How to realize GridView interlaced discoloration and light stick effect in Asp.net
This article mainly introduces how to achieve GridView interlaced discoloration and light rod effect in Asp.net, which has a certain reference value, and interested friends can refer to it. I hope you can learn a lot after reading this article.
Method 1: use the foreground with the background
1.aspx interlaced discoloration attribute ()
The copy code is as follows:
Set the mouse in the 1.aspx.cs background event as for the discoloration effect on a line
The copy code is as follows:
Protected void gvProjectList_RowCreated (object sender, GridViewRowEventArgs e)
{
E.Row.Attributes.Add ("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#eaeaea';"); / / this is the background of changing a line when the mouse moves over it.
E.Row.Attributes.Add ("onmouseout", "this.style.backgroundColor=currentcolor;"); / / restore when the mouse is removed
}
Method 2: JQuery method
1.aspx
First reference the jQuery function library, download it at http://jquery.com/, then write the css style, and then add the js code.
The copy code is as follows:
The copy code is as follows:
.even {
Background:#F5F5F5
}
.odd {
Background:#FFFFFF
}
.over {
Background:#CDE6FF
}
.tr _ chouse {
Background:#6AB1FF
}
The copy code is as follows:
$(document) .ready (function () {
$(".gridview tr:odd") .addClass ("odd"); / / Odd lines are set to "odd" style
$(".gridview tr:even") .addClass ("even"); / / even rows are set to "even" style
$(".gridview tr") .mouseover (function () {$(this) .addClass ("over");}) / / add "over" style when mouseover
.mouseout (function () {$(this) .removeClass ("over");}) / / remove the "over" style when mouseout
.click (function () {$(this) .toggleClass ("tr_chouse");}) / / when click adds or removes the "tr_chouse" style to achieve data column selection
});
[updated at 13:57:30 on February 18, 2013]
The copy code is as follows:
$(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 ();})
Thank you for reading this article carefully. I hope the article "how to achieve GridView interlaced discoloration and light stick effect in Asp.net" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
