jQuery table styling vs CSS table styling for alternate rows

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 perform开发者_高级运维ance, particularly for larger (up to 200 rows) tables.

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

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.