2 Methods of ASP.net gridview interlacing and Light stick effect _ practical skills

method One: The foreground and backstage use together
1.aspx interlacing Properties (<alternatingrowstyle backcolor= "#f5f5f5"/>)

Copy Code code as follows:

<asp:gridview id= "gvprojectlist" runat= "Server"
onrowcreated= "gvprojectlist_rowcreated" >
<alternatingrowstyle backcolor= "#f5f5f5"/>
</asp:GridView>

1.aspx.cs background Events Set the mouse to change the color effect on a line

Copy Code code 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 that changes a row when the mouse moves to a line
E.row.attributes.add ("onmouseout", "this.style.backgroundcolor=currentcolor;"); /restore when Mouse is moved
}

method Two: jquery Way
1.aspx
First refer to the JQuery function library, download in http://jquery.com/, then write CSS style, and then add JS code.

Copy Code code as follows:

<script src= "Jquery-1.5.2.min.js" type= "Text/javascript" ></script>

Copy Code code as follows:

<style type= "Text/css" >
. even {
Background: #F5F5F5;
}
. Odd {
Background: #FFFFFF;
}
. over{
Background: #CDE6FF;
}
. tr_chouse {
Background: #6AB1FF;
}
</style>

Copy Code code as follows:

<script type= "Text/javascript" >
$ (document). Ready (function () {
$ (". GridView Tr:odd"). AddClass ("odd"); Odd line set to "odd" style
$ (". GridView Tr:even"). AddClass ("even"); Even-numbered rows are set to the "even" style
$ (". GridView tr"). MouseOver (function () {$ (this). addclass (' over ');})///When mouseover adds the over style
. mouseout (function () {$ (this). Removeclass (' over ');})//When mouseout is removed the over style
. Click (function () {$ (this). Toggleclass ("Tr_chouse");})//When Click joins or removes the "Tr_chouse" style, implement data column selection
});
</script>

【 February 18, 2013 13:57:30 Update】

Copy Code code as follows:

<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>