jquery table styling vs css table styling for alternate rows

Question

Is it faster/better to use CSS with classes on tables for odd/even rows generated on the server or to use jQuery to style stripes on document.Ready()?

I'd like to start using jQuery to make my markup less cluttered but I'm not sure about the performance, particularly for larger (up to 200 rows) tables.

Answer 1

It's always better to use server generated CSS classes when possible. With jQuery you can end up with little visual glitches and flickers as the page loads and the logic is applied.

Answer 2

it's not 100% yet (on internet explorer, anyway) but I generally use CSS nth child. for example:

.someclass:nth-child(2n+1) { background:#911100; }

would make every other row's background #911100. Neat thing is even if you delete a row with jquery, the CSS automatically recolors the rows below.

Answer 3

Depending on browser you may not have a choice. jQuery will work with older browsers like IE7 which don't have the Nth child selector.

Ideally you should use css. The stylesheet is the best place for styles to go.

I would use css with a javascript backup for older browsers. If, for example, you want to zebra all tables try this:

tr:nth-child(2n+1), tr.odd { background:#911100; }
tr:nth-child(2n), tr.even { background:#222200; }

And in jQuery add the .odd and .even classes if the browser is old.

//You will need to check which browsers don't support n-th child. But I doubt IE will        for example...
if($.browser.msie && $.browser.version < 9) {
  $('tr:odd').addClass('odd');
  $('tr:even').addClass('even');
}