A better way to determine even/odd rows in table

Question

Say you have a webpage with following sample code:

<tr class="even">
    <td>something1</td>
    <td colspan="1">somthing1.1</td>
</tr>


<tr class="odd">
    <td>something2</td>
    <td><b>something2.1</b></td>
</tr>

<tr class="even">
    <td>something3</td>
    <td><b>something3.1</b></td>
</tr>

These are not in a loop so I have to explicitly say 'even' 'odd'. Later on if we decide to add a new row between something2 and something3 then we need to change 'even' 'odd' for rest of the rows as well.

Is there way in css to do this automatically in IE6?

Currently this is my css code for even

.headerTable tr.even {
    font-weight : bold;
    font-size : 9pt;
    font-family : Arial,Helvetica,sans-serif,Verdana,Geneva;
    background-color: #FFFFFF;
    height: 20px;
    color: #000000;
}

I already had jQuery

Answer 1

Give jQuery a try. Then you can simply do this:

   $("#myTable tbody tr:visible:even",this).addClass("even"); 
   $("#myTable tbody tr:visible:odd",this).addClass("odd");

The ":visible" selector isn't really necessary, but when you filter a table by making some rows hidden, the method will still work correctly.

Answer 2

The way to do this would be to use the nth-child(even) and (odd) rules. Unfortunately, and this should come as no surprise, IE6 does not support this. So you have a few options:

A) Use Javascript, with the obvious drawback of it not working for people with JS disabled:

var rows = document.getElementById('mytable').getElementsByTagName('tr');
for(var x = 0; x < rows.length; x++) {
    rows[x].className = (x % 2 == 0) ? 'even' : 'odd';
}

If you expect to need more dynamic client side behavior on your application, you could then check a library like jQuery out. For just this it is unnecessary, but it makes working with Javascript across browsers a breeze. You would do the above with jQuery like it is shown in this answer.

Depending on your audience, Javascript may be perfectly acceptable. If it's not, then maybe you can...

B) Simplify your CSS and keep doing it manually. You can only mark the odd rows with a class, and then make the row default style the even styling. This will save you some work when moving things around.

C) Generate the rows programmatically. It is really archaic to be entering data like that into a fixed table if you're going to be updating it often enough that this is a problem. I'm obviously oblivious to your circumstance, but it should be trivial to do this in a loop somehow with a simple language like PHP.

D) Stop using a really outdated browser. :) (This is only half joking, as I'm sure its out of your control)

Answer 3

The best approach would be the :nth-child() pseudo-class.

But unfortunately it’s not widely supported yet. So you’ll probably need to use JavaScript to do that.

Answer 4

Use jQuery's even/odd child implementation