Alter Dynamic Table Row Background Colors Using JavaScript 

Many web applications that present tabular data use alternating background colors of table rows to increase the readability of that data. This could be more attractive and nice looking for visitors.

I wanted the table to be dynamic. We can use PHP for doing this, but hence I’m showing it in JavaScript.

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>

we use 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";
}
}
}
}

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:

row color img

row color example

Hope this may help the beginners who are developing web applications. 🙂

Happy’s coding.

Many web applications that present tabular data use alternating background colors of table rows to increase the readability of that data. This could be more attractive and nice looking for visitors.

I wanted the table to be dynamic. We can use PHP for doing this, but hence I’m showing it in JavaScript.

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>

we use 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";
}
}
}
}

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:
1457_rowcolor1

Hope this will may help the beginners who are developing web applications. J

Happy’s coding.

Advertisements