Alternating Table Background Colour

Oz · Jul 20 '05, 11:24 AM

Re: Alternating Table Background Colour

Generally to keep my script simple I only apply the onload event to the document as a whole and not individual elements. Here is a simple document onload implementation that accomplishes your goal:

<html>
<head>
<script language="javas cript">
function init(){
var table = document.getEle mentById("table ");
var rows = table.tBodies[0].childNodes;
for (var i=0;i<rows.leng th;i++) {
rows[i].style.backgrou ndColor = (i%2 == 0) ? "red" : "yellow";
}
}
</script>
</head>
<body onload="init()" >
<table border="1" id="table">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
</table>
</body>
</html>

"Alistair Birch" <alistairb at fpc wa gov au> wrote in message news:3f9cf477$1 @quokka.wn.com. au...
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('r owIndex') 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.getAttr ibute('rowIndex ')%2)==0?'red': 'yellow')">
<td>1</td>
</tr>
<tr onclick="style. backgroundColor =((this.getAttr ibute('rowIndex ')%2)==0?'red': 'yellow')">
<td>2</td>
</tr>
<tr onclick="style. backgroundColor =((this.getAttr ibute('rowIndex ')%2)==0?'red': 'yellow')">
<td>3</td>
</tr>
<tr onclick="style. backgroundColor =((this.getAttr ibute('rowIndex ')%2)==0?'red': 'yellow')">
<td>4</td>
</tr>
<tr onclick="style. backgroundColor =((this.getAttr ibute('rowIndex ')%2)==0?'red': 'yellow')">
<td>5</td>
</tr>
</table>

Alternating Table Background Colour

Alternating Table Background Colour

Comment