Geek Answers Handbook

How to change table row colors in asp.net mvc using jquery?

Probably a dumb question, but I'm new to MVC and jQuery. I want to alternate the colors of the rows of my tables, and I decided that I would use jQuery for this. I know that I could write an extension method ( http://haacked.com/archive/2008/08/07/aspnetmvc_cycle.aspx ) etc., but after reading the SH comment on the article at http: // haacked .com / archive / 2008/05/03 / code-based-repeater-for-asp.net-mvc.aspx I chose jQuery as the solution I want to implement.

I want to implement the method described at http://www.packtpub.com/article/jquery-table-manipulation-part2 , but I do not understand where to put the initial jQuery call (for example:: $ (document) .ready (function ( ) {...});

As I said, I'm new to jQuery ...

+4
source share
3 answers

You can accomplish this by setting the class to all even rows in the table.

<html> <head> <title>Example Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('tr:even').addClass('alt-row-class'); }); </script> </head> <body>...</body> </html>

Then apply the style to this class using standard css:

 .alt-row-class { background-color: green; }

The comment correctly indicates that you can play with the ( tr:even ) selector to get the results that you want to relate to the tbody , thead and tfoot .

+19
source

Keep in mind that if you use jQuery and the user has javascript disabled, your user interface will not look the way you want. You might want to consider assigning CSS classes for styling in the view code itself.

  @{ var alternating = false; foreach (var row in Model) { <tr class='@(alternating ? "alternating-row" : "normal-row")'> ... alternating = !alternating; }
+11
source

If you use the jQuery Tablesorter plugin , it has a built-in “widget” for this, called a “zebra” (among all its other functions).

+1
source

More articles:


All Articles