Formatting ASP.NET GridView using jQuery
In this post, we will see how easily we can assign alternate background color of ASP.NET Grid Views rows using jQuery. In this example, we will assign grey color to all the odd rows of GridViews. When I say Odd, that means Rows which are having odd numbers like Row1, Row3, Row5 etc.
Related Post:
Let's take a ASP.NET Grid View Control and placed it on ASP.NET Page with ID "gdRows". See below.
<asp:GridView ID="gdRows" 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() {
$("#<%=gdRows.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() {
$("#<%=gdRows.ClientID%> tr").filter(":even").css("background-color", "blue");
});
Feel free to contact me for any help related to jQuery, I will gladly help you.
