Article
About the Author
Kennet Svanberg
Kennet is a programmer and XML specialist. For the last two years, he's been working on various projects regarding single source solutions for XML tagged information. He holds a Bachelor of Science from Royal Institue of Technology in Sweden.
Alter Table Row Background Colors Using JavaScript
Many sites that present tabular data use alternating background colors to increase the readability of that data. And as I developed a site, I realised I wanted to do that, too. The problem? In my case the table was not generated by a server side application or script of which you can find numerous examples on the Web.
The obvious solution was to hardcode every second row to ensure it had a different background color. But I wanted the table to be dynamic, so that it was possible to add a new row in the middle of the table without changing the background color attribute of the rows that followed.
My solution uses JavaScript, as CSS3 isn't truly a viable option yet. Browsers today still struggle to support CSS1 and CSS2. Even though HTML tables aren't recommended for Web page layout, they are still perfectly suited to the presentation of tabular data. In this tutorial, I'll present three examples based on the same idea. I have tested the solutions in IE6, Firefox 1.0, Mozilla 1.7.3 and Opera 7.54 on the Windows platform only.
Getting Started
Let's start with an ordinary html table. Whether the table contains head/foot elements doesn't matter in this case:
<table id="theTable">
<tr><td>0 - some txt</td></tr>
<tr><td>1 - some txt</td></tr>
<tr><td>2 - some txt</td></tr>
<tr><td>3 - some txt</td></tr>
<tr><td>4 - some txt</td></tr>
</table>
Now, we need to check that the browser is fairly new and has the necessary JavaScript capabilities (i.e. W3C DOM support). The following line performs this check, disqualifying Netscape 4 and others of that generation. Such browsers will make no attempt to color the table.
if(document.getElementById)
Also note that common to all these examples is this code:
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
...
Example 1
This first example uses a style element through which we have defined two classes for background colors:
<style>
.odd{background-color: white;}
.even{background-color: gray;}
</style>
The style is flexible: it could just as well define something else, such as that every second row should display in italics. The complete function looks like this:
function alternate(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
}
}
Here, %, the modulo operator, gives us the remainder in division.
The above function should be called from the onload event of the body tag:
<html>
…
<body onload="alternate('thetable')">
<table id="thetable">
<tr><td>…</td></tr>
</table>
…
The result could look something like this:
