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

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');
}