Asp.net implement two methods to achieve the effects of Row-changing and Optical Rod in GridView

Method 1: work with the frontend and backend
1. aspx row-changing properties (<AlternatingRowStyle BackColor = "# f5f5f5"/>)
Copy codeThe Code is as follows:
<Asp: GridView ID = "gvProjectList" runat = "server"
OnRowCreated = "gvProjectList_RowCreated">
<AlternatingRowStyle BackColor = "# f5f5f5"/>
</Asp: GridView>

1. Set the mouse color on a line in aspx. cs background events
Copy codeThe 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 for changing the background of a row when you move the cursor over a row.
E. Row. Attributes. Add ("onmouseout", "this. style. backgroundColor = currentcolor;"); // restore when the mouse moves
}

Method 2: JQuery
1. aspx
First reference jQuery function library, in the http://jquery.com/download, and then write css style, and then add js Code.
Copy codeThe Code is as follows:
<Script src = "jquery-1.5.2.min.js" type = "text/javascript"> </script>

Copy codeThe Code is as follows:
<Style type = "text/css">
. Even {
Background: # F5F5F5;
}
. Odd {
Background: # FFFFFF;
}
. Over {
Background: # CDE6FF;
}
. Tr_chouse {
Background: # 6AB1FF;
}
</Style>

Copy codeThe Code is as follows:
<Script type = "text/javascript">
$ (Document). ready (function (){
$ (". Gridview tr: odd"). addClass ("odd"); // set the odd number of rows to "odd" Style
$ (". Gridview tr: even"). addClass ("even"); // set the even row to "even" Style
$ (". Gridview tr"). mouseover (function () {$ (this). addClass ("over") ;}) // Add the "over" style when mouseover
. Mouseout (function () {$ (this). removeClass ("over") ;}) // remove the "over" style when mouseout.
. Click (function () {$ (this). toggleClass ("tr_chouse");}) // when you click to add or remove the "tr_chouse" style to select data Columns
});
</Script>

【February 18, 2013 13:57:30 update]
Copy codeThe Code is 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>