Asp. net GridView interleaved color change and light rod effect are achieved by two methods

Method 1: use the foreground and background together
1.aspx interlaced color change property ( < AlternatingRowStyle BackColor="#f5f5f5" / > )

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

1.aspx.cs background event to set the mouse color change effect on a line

 
protected void gvProjectList_RowCreated(object sender, GridViewRowEventArgs e) 
{ 
e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#eaeaea';");// This is when the mouse moves over a row to change the background of a row  
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;");// Mouse movement recovery  
} 

Method 2: JQuery mode
1.aspx
First reference jQuery library, http:// jquery.com/download, then write css style, then add js code.

 
<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"); // The odd number of rows is set to  "odd"  style  
$(".gridview tr:even").addClass("even"); // Even rows are set to zero  "even"  style  
$(".gridview tr").mouseover(function(){$(this).addClass("over");}) // when  mouseover  add  "over"  style  
.mouseout(function(){$(this).removeClass("over");}) // when  mouseout  When removing the  "over"  style  
.click(function(){$(this).toggleClass("tr_chouse");}) // when  click  Add or remove  "tr_chouse"  Style, the implementation of data column selection  
}); 
</script> 

[updated at 13:57:30 on February 18, 2013]

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