By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
458,222 Members | 1,099 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 458,222 IT Pros & Developers. It's quick & easy.

Alternating Table Background Colour

P: n/a
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>

Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Oz
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="javascript">
function init(){
var table = document.getElementById("table");
var rows = table.tBodies[0].childNodes;
for (var i=0;i<rows.length;i++) {
rows[i].style.backgroundColor = (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:3f********@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('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>

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.