Alternate Background Color of ASP.NET Grid Views Rows using jQuery.

In this tutorial, how to assign alternate background color of ASP.NET Grid Views rows using jQuery.

First, add ASP.NET Grid View Control and placed it on ASP.NET Page with ID "GridView1".

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

jQuery provides a selector ":odd" which selects only odd elements. So we need to filter out all the odd rows and assign the color. To filter the rows, we will use filter() method of jQuery, which takes selector as argument and returns the elements which matches the selector. See below jQuery Code.

$(document).ready(function() {
  $("#<%=GridView1.ClientID%> tr").
  filter(":odd").css("background-color", "grey");
});

You can also use ":even" selector to assign other than default color to grid view rows.

$(document).ready(function() {
  $("#<%=GridView1.ClientID%> tr").
  filter(":even").css("background-color", "blue");
});

Demo

Download Complete Source Code