Grow your CSS skills. Land your dream job.

Last updated on:

jQuery Zebra Stripe a Table

$("tr:odd").addClass("odd");

Then use some CSS:

.odd {
   background: #ccc;
}

Comments

  1. Permalink to comment#

    Very nice! I didn’t know about :odd. You learn something new every day :D

    (However, I would use :even (assuming it exists), becuase I would like the first row as the “normal” color).

  2. Permalink to comment#

    Well, you can just do
    tr {background-color: #FFF;}
    and i think the .odd will override it, and if not you can always have the background color for the :odd to !important.

  3. Permalink to comment#

    You are awesome Chris, thanks for posting all this stuff!

  4. fludotlove
    Permalink to comment#

    It’s better to use:

    $('tr:nth-child(odd)').addClass('odd');

    Since your example will count all table rows without consideration of what table they are in. The above code will always start with an even row, even if it’s essentially the 7th table row in your document.

    • chris
      Permalink to comment#

      thx! exactly what i was looking for

    • Dru
      Permalink to comment#

      Bump! This is the implementation I needed because I have multiple tables on a page. This starts the index over with each new table on the page. Thanks!

  5. dani
    Permalink to comment#

    i’m newbie. i try the code and not working. my i have full example for the using of the code ? thanks

  6. @dani, here is a simple demo explaining exactly how to use this code, and a live example of it being used.

    http://webdesignandsuch.com/2010/08/add-zebra-striping-to-a-table-with-jquery/

  7. fingerlicking
    Permalink to comment#

    Why do you wanna use jQuery?? CSS is capable of this.

    • basic147
      Permalink to comment#

      That’s what I thought…

      Is there a reason anybody???

    • Norm
      Permalink to comment#

      Yes, CSS is capable of doing the Zebra striping, provided you have the appropriate HTML markup. Using jQuery for this purpose can reduce the amount of markup. Also, using jQuery for this purpose is helpful when you are dynamically adding or removing rows in a table on the client side with AJAX and you want to ensure that the table continues to have the desired zebra striping. After you add or delete a row, for example, you just call a jQuery function to reapply the zebra striping.

  8. Norm
    Permalink to comment#

    Another scenario where using jQuery for zebra striping is useful is when you are doing client-side sorting of a table. After the sort is done, you will want to reapply the zebra striping to the table rows.

  9. I like to use $(‘tbody tr:odd’) – so that it looks at the tbody, and doesn’t count my header rows, but that is just me.

    I use this all over the place, but am trying to see if zebra striping or row hight lighting works better in large tables. I have a on-line survey you can participate in if you are interested: http://access2learn.com/survey1/

    Thanks.

  10. If you want to reset the table after sorting or deleting rows etc. It takes two lines. I wonder if anyone knows how to put this into a function that can be called. resetStripes() or the like?

    Here is the two line call I am making at the moment.

    $(“.stripeme tbody tr”).removeClass(“alt”);
    $(“.stripeme tbody tr:even”).addClass(“alt”);

    Thanks,

    Jana

  11. Permalink to comment#

    I really liked this tip – it’s gonna be very useful, saving a lot of programming time…

  12. Ricardo
    Permalink to comment#

    Excelent. Very simpe solution. Thanks

  13. soumya
    Permalink to comment#

    Or to be very precise … i.e if you want the first row/li to have odd class you should do :
    $(“tr:even”).addClass(“odd”);
    (0 – based indexing )

  14. Jesse Szypulski
    Permalink to comment#

    I would just like to say its completely feasible with CSS only.

    tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
    tr:nth-child(odd) { background: #777777; color: #7D7D7D; }

    and you can target specific tables if need be. (add class or id to your table)

    table.mytableclass tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
    table.mytableclass tbody tr:nth-child(odd) { background: #777777; color: #7D7D7D; }

    or with IDs

    table#mytableclass tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
    table#mytableclass tbody tr:nth-child(odd) { background: #777777; color: #7D7D7D; }

  15. Permalink to comment#

    Kudos for you. :D
    I didn’t know about the odd pseudo element thanks

  16. dstefani
    Permalink to comment#

    Yes you can do this with pure CSS, but what if you want it to work in IE8 or lower?
    jQuery or a much longer DOM script makes it work.

  17. Thnx for the ” simplest” idea for creating Zebra styling.

    Now, how is it possible to do the same effect without jQuery ? (besides adding class=”odd” to the wanted rows !) .

    Thanx in advance

    • walid
      Permalink to comment#

      you can now use tr:nth-child(2n) which will select every even row. Using tr:nth-child(2n-1) will select odd, tr:nth-child(3n) for every third tr

  18. JHarcourt

    Thanks for this page!

    How would you zebra-stripe a table where some of the rows have “display:none” tags on them? There are situations where we want to hide certain rows in different scenarios. But when we do, this zebra-striping “stripes” rows that don’t get displayed, resulting in odd-looking tables.

Leave a Comment

Posting Code

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like this:

```
<div>Example code</div>
```

You don't need to escape code in backticks, Markdown does that for you. If anything screws up, contact us and we can fix it up for you.

*May or may not contain any actual "CSS" or "Tricks".