jQuery Example: Zebra Tables (Striping)

If you are going to copy/paste the page for use on your computer, please remove the reference to http://skfox.com/mint and the google analytics script at the bottom. Otherwise, I get a bunch of clicks/statistics on my server that corresponds to your testing.

Alternatively, you can download all of the jQuery examples in a zip file.

I’m working on putting some of my most often used jQuery snippets onto SKFox.com. Here is my first such attempt. Table striping makes data easier to read and jQuery has some great selectors for this.

$(“table.zebra thead > tr:first-child()”).addClass(“zSelected”);
$(“table.zebra tbody > tr:nth-child(odd)”).addClass(“zOdd”);
$(“table.zebra tbody > tr:nth-child(even)”).addClass(“zEven”);

Be sure to check out the table striping demo page and view the source to see the small amount of CSS and javascript it takes to make your tables pop for your users.

More to come over the next few weeks…

This entry was posted in jQuery. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

2 Responses to jQuery Example: Zebra Tables (Striping)

  1. Blender says:

    Is it possible to print the pages with striping?

  2. Blender says:

    When you print the table the striping is lost.
    Is it possible to print with the applied classes?

Leave a Reply

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>