Formatting Tables with jQuery

  • follow us in feedly
Published February 18, 2013 by Brad Knutson
Formatting Tables with jQuery

Most of us take for granted tables we see with nicely formatted rows with alternating colors. It’s great for readability and just looks better.

There are a few different ways to do this. Let’s first look at the jQuery solution.

jQuery

jQuery(document).ready(function() {
	jQuery("tr:odd").addClass("odd");
});

The above snippet of code will add the “odd” class to ever odd row. We can now add some style to the class.

CSS

tr.odd {
   background: #EFEFEF;
}

The Result

Header 1 Header 2 Header 3 Header 4
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4
Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 5, Cell 4
Row 6, Cell 1 Row 6, Cell 2 Row 6, Cell 3 Row 6, Cell 4
Row 7, Cell 1 Row 7, Cell 2 Row 7, Cell 3 Row 7, Cell 4
Row 8, Cell 1 Row 8, Cell 2 Row 8, Cell 3 Row 8, Cell 4

Can this method be translated to columns too? Yes, or course it can, we just need to change the selectors around a little bit. We need to change the jQuery selector to the <td< tag rather than the <tr< tag, but the process is the same.

jQuery

jQuery(document).ready(function() {
	jQuery("td:odd").addClass("even");
});

CSS

td.even {
   background: #EFEFEF;
}

The Result

Header 1 Header 2 Header 3 Header 4
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4
Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 5, Cell 4
Row 6, Cell 1 Row 6, Cell 2 Row 6, Cell 3 Row 6, Cell 4
Row 7, Cell 1 Row 7, Cell 2 Row 7, Cell 3 Row 7, Cell 4
Row 8, Cell 1 Row 8, Cell 2 Row 8, Cell 3 Row 8, Cell 4

What about a checkered table? Why not? Let’s combine the previous two examples, with a few small tweaks.

jQuery

jQuery(document).ready(function() {
	jQuery("tr:odd").addClass("odd");
	jQuery("tr:even").addClass("even");
	jQuery("td:odd").addClass("odd");
	jQuery("td:even").addClass("even");
});

CSS

tr.odd td.even, tr.even td.odd {
   background: #EFEFEF;
}

The Result

Header 1 Header 2 Header 3 Header 4
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3 Row 1, Cell 4
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3 Row 2, Cell 4
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 Row 3, Cell 4
Row 4, Cell 1 Row 4, Cell 2 Row 4, Cell 3 Row 4, Cell 4
Row 5, Cell 1 Row 5, Cell 2 Row 5, Cell 3 Row 5, Cell 4
Row 6, Cell 1 Row 6, Cell 2 Row 6, Cell 3 Row 6, Cell 4
Row 7, Cell 1 Row 7, Cell 2 Row 7, Cell 3 Row 7, Cell 4
Row 8, Cell 1 Row 8, Cell 2 Row 8, Cell 3 Row 8, Cell 4

Check out my post on CSS-only tables.

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

2 thoughts on “Formatting Tables with jQuery

  1. Ivan

    Hi Brad,
    one question: wouldn’t your code also be applied to the headers? Say, there are 3 rows, all being headers – how can you avoid applying the odd style to them?

    Thanks!
    Ivan.

    Reply
    1. Ivan

      I added one more detail to the code, and it took a while to find it in this messy internet:
      tr:not(:has(th)):odd -> same as before, but the selection now avoids the rows which have the sting ‘th’

      Ivan.

Share Your Thoughts

Your email address will not be shown.

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