ansaurus

Question

How do I alternate table row colors in asp.net mvc using jquery?

Answer 1

+1 A:

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

Chad Birch 2009-03-19 17:16:12

oh my, thats nice. With sorting and paging thrown in for good measure...

grenade 2009-03-19 17:18:57

Answer 2

+10 A:

You can accomplish this by setting a class on all the even rows of a 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"&gt;&lt;/script&gt;
        <script type="text/javascript">
            $(document).ready(function() {
                $('tr:even').addClass('alt-row-class');
            });
        </script>
    </head>
    <body>...</body>
</html>

Then apply style to that class using standard css:

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

A commenter correctly points out that you might wish to play around with the selector (tr:even) to get the results you want relative to tbody, thead and tfoot elements.

Ken Browning 2009-03-19 17:17:53

I usually apply this to the tbody rows only, with separate classes for thead/tfoot.

tvanfosson 2009-03-19 17:19:02

This is what I'm seeing in my google search, but I haven't worked out where that jQuery code goes. My first thought was to add a script tag, but that failed miserably. Where do I include your snippet in my view?

grenade 2009-03-19 17:21:50

Thanks for the clarification, do I also need a script reference to jQuery?

grenade 2009-03-19 17:33:59

Yes, you do. Sorry for leaving it out. I've added it.

Ken Browning 2009-03-19 17:35:58

Got there in the end, cheers!

grenade 2009-03-19 17:40:27

language="text/javascript" makes it so that firefox and safari will not run the javascript. language="javascript" works though. You may be thinking of type="text/javascript" I'm not sure.

ScArcher2 2009-06-10 16:07:37

Thanks for your edit ScArcher2 :)

Ken Browning 2009-06-10 22:05:14

Answer 3

+5 A:

Be aware that if you use jQuery and the user has javascript turned off, your UI is not going to get styled the way you want. You may want to consider doing the assignment of CSS classes for styling in the view code itself.

   <%  var alternating = false;
       foreach (var row in Model) {
           if (alternating) {
    %>
            <tr class="alternating-row">
    <%
           } else {
    %>
            <tr class="normal-row">
    <%     }
           alternating = !alternating;
     %>

     ...

Even, better would be to use an extension method to the HtmlHelper for rows.

   <%  var alternating = false;
       foreach (var row in Model) {
    %>
      <%=  Html.BeginRow( alternating ) %>
   <%      
           alternating = !alternating;
    %>
       ...
      <%=  Html.EndRow() %>

tvanfosson 2009-03-19 17:27:46

Charlie Brown 2010-01-29 22:24:16

Never test if a boolean is `== true`, just test the boolean: `<tr class="<%= alternating ? "alternating-row" : "normal-row" %>">`

Stephen P 2010-05-22 00:49:43

ansaurus

tags:

views:

answers:

How do I alternate table row colors in asp.net mvc using jquery?

related questions