jQuery Zebra Stripe a Table

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

Then use some CSS:

.odd {
   background: #ccc;
}

Comments

  1. User Avatar
    Dor
    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. User Avatar
    Dyllon
    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. User Avatar
    nate
    Permalink to comment#

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

  4. User Avatar
    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.

    • User Avatar
      chris
      Permalink to comment#

      thx! exactly what i was looking for

    • User Avatar
      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. User Avatar
    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. User Avatar
    mike ilz
    Permalink to comment#

    @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. User Avatar
    fingerlicking
    Permalink to comment#

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

    • User Avatar
      basic147
      Permalink to comment#

      That’s what I thought…

      Is there a reason anybody???

    • User Avatar
      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. User Avatar
    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. User Avatar
    Walter Wimberly
    Permalink to comment#

    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. User Avatar
    Jana Mills
    Permalink to comment#

    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. User Avatar
    Geison
    Permalink to comment#

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

  12. User Avatar
    Ricardo
    Permalink to comment#

    Excelent. Very simpe solution. Thanks

  13. User Avatar
    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. User Avatar
    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. User Avatar
    leandro
    Permalink to comment#

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

  16. User Avatar
    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. User Avatar
    rachid ouabderzaq

    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

    • User Avatar
      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. User Avatar
    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.

  19. User Avatar
    Jonathan Gamble

    Instead of changing your css file, you could just do this:

    $("tbody tr:odd").css('background-color', '#ccc');
    

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag