What is the best way to style alternating rows in a table?

Question

Obviously, the actual style of the odd/even rows will be done via a CSS class, but what is the best way to \"attach\" the class to the rows? Is is better to put it in the ma

Answer 1

As said in the other answers, doing it on a large table on the client side will be slower than on the server side, and may not work if the user has javascript disabled.

However, using a JS framework like jQuery makes it so easy that it's really tempting :

$(document).ready(function() {
  $('.myTable tr:odd').addClass('alternateRow');
});

Answer 2

Someday, we'll be able to just use pure CSS. Of course, this part of the CSS specification was introduced in 2001 and it's still not supported. =(

Answer 3

I would do this initially server-side since the client may not have javascript enabled. If you are adding/removing rows client-side with javascript, then you may want to also have the ability to do it on the client after the add/remove event has completed. As much as possible you should try to have your interface behave well without Javascript unless you can control the browser environment (say, for example, in an intranet app where you can require that it be enabled).

Answer 4

If you're using any type of framework, this is usually one of the first features they include.

Else I googled for "jscript table alternating colors" and got several dozen links to techniques.

(Aside: It's too bad developers never get credit for the code they didn't write.)

Answer 5

For a table of such a large size I would do the row processing on the server side, using PHP or similar to calculate to odd/even class names for each row. This solution will work for those with JavaScript turned off and will be a lot higher performance than any JavaScript library processing a table element of this size.

In PHP the logic would look something like

foreach($rows as $i => $row) {
    $class = ($i % 2 == 0) ? 'even' : 'odd';
}

If you cannot do any server-side processing I would recommend having the JavaScript set the class tags for each row rather than manipulating the styles directly. This way the presentation is left to the CSS and behaviour is left to the JavaScript and if you do change the way the classes are generated at a later date the presentation code will stay the same.

Answer 6

I'd put it in the markup (server side). It takes the server less than a millisecond to complete rowNum = (rowNum - 1) * -1 It's a pet peeve of mine when a website is slow because of how much javascript is being executed.