Two methods of GridView interlaced color change and light rod effect

Method 1: Use the front desk and the backend together
Interlaced color change attribute (<AlternatingRowStyle BackColor="#f5f5f5" />)

Copy the codeThe code is as follows:

 
<asp:GridView ID="gvProjectList" runat="server" 
OnRowCreated="gvProjectList_RowCreated"> 
<AlternatingRowStyle BackColor="#f5f5f5" /> 
</asp:GridView> 

Set the mouse to the color change effect on a certain line in the background event

Copy the codeThe code is as follows:

 
protected void gvProjectList_RowCreated(object sender, GridViewRowEventArgs e) 
{ 
("onmouseover", "currentcolor=;='#eaeaea';");//This is the background of changing a row when the mouse moves to a row
("onmouseout", "=currentcolor;");//Recover when the mouse is removed
} 

Method 2: JQuery method

First, refer to the jQuery function library, download it in /, then write the css style, and then add the js code.

Copy the codeThe code is as follows:

Copy the codeThe code is as follows:

 
<style type="text/css"> 
.even { 
background:#F5F5F5; 
} 
.odd { 
background:#FFFFFF; 
} 
.over{ 
background:#CDE6FF; 
} 
.tr_chouse { 
background:#6AB1FF; 
} 
</style> 

Copy the codeThe code is as follows:

 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".gridview tr:odd").addClass("odd"); //Odd line is set to "odd" style
$(".gridview tr:even").addClass("even"); //Even lines 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, realizes data column selection
}); 
</script> 

【Updated on February 18, 2013 at 13:57:30】

Copy the 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(){().add_endRequest(EndRequestHandler);} 
$(document).ready(function() { reload(); }) 
</script> 