Hi
I want rows of a table to appear in alternating background colours. Having looked around the web I can't find any solution apart from waiting for the next version of CSS, so I tried building one myself, but I need some help to finish it.
I use the getAttribute('rowIndex') to return the position of a row within the table and apply modulo 2 to return a 0 or 1 indicating an even or odd row number, from which I apply the alternating background colours (in this case garish red and yellow, just in case any of you were feeling sleepy).
My problem is how I can apply these colours to the table. The nearest I have been able to get is onclick - but of course the background colour only gets applied when the user clicks on the table. Obviously what I really need is an "onload" event but I can't find anything like this which works with the TR element.
Does anyone have any suggestions? Or maybe I am going in completely the wrong direction.
Yours
Alistair Birch
Albany, Western Australia
Best attempt so far (using onclick, so you'll have to click on each row to see the colour, but it works otherwise):
-----------------------don't cut here you'll ruin your monitor------------------------------------------------
<table border="1">
<tr onclick="style.backgroundColor=((this.getAttribute ('rowIndex')%2)==0?'red':'yellow')">
<td>1</td>
</tr>
<tr onclick="style.backgroundColor=((this.getAttribute ('rowIndex')%2)==0?'red':'yellow')">
<td>2</td>
</tr>
<tr onclick="style.backgroundColor=((this.getAttribute ('rowIndex')%2)==0?'red':'yellow')">
<td>3</td>
</tr>
<tr onclick="style.backgroundColor=((this.getAttribute ('rowIndex')%2)==0?'red':'yellow')">
<td>4</td>
</tr>
<tr onclick="style.backgroundColor=((this.getAttribute ('rowIndex')%2)==0?'red':'yellow')">
<td>5</td>
</tr>
</table>
