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.