Alternating Table Background Colour

Alistair Birch · Oct 27, 2003

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>

Oz · Oct 28, 2003

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.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 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>

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one?	0	Jan 10, 2021
Sort by number of characters	1	Nov 2, 2023
Can anyone please help? HTML - two tables applying different styles	4	Dec 1, 2020
Filter table rows based on multiple checkboxes value	2	Jan 13, 2023
Only one table shows up with the information	2	Mar 29, 2023
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Angularjs newbie - second JSON datasource does not display	0	May 18, 2022
How can I create a table using the input element?	1	Mar 25, 2022

Alternating Table Background Colour

Alistair Birch

Oz

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads