Alternate color of a table's rows!

miregistered · May 25, 2007

Hello,

I found the following script on the net:

<script type="text/javascript">
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.className = "even";
}else{
rows.className = "odd";
}
}
}
}
</script>

<body onload="alternate('table1')">

It works fine but if the table with id="table1" appears once in the code. If it appears more than once it works only for the first one.

How could I modify it to work for more than one table?

Thanks in advance, D.

BabyJeffy · May 25, 2007

IDs are, by definition, unique... so you can only have one of them on a page.

If you wanted to "decorate" more than one table, the most simple way to do it (using the code you already have) is to call the alternate() function multiple times... each one with the unique ID of a table.

Eg:

Code:

<body onload="alternate('table1');alternate('table2');alternate('tableN')">
...
<table id="table1">...</table>
<table id="table2">...</table>
...
<table id="tableN">...</table>
</body>

There are other ways to do this (server-side is the best way to do it... therefore working for those without javascript enabled). You could modify the code to decorate all tables by tag name (using document.getElementsByTagName('table') in a loop) or by class name (an extension of the previous technique that tests to see if a table has a particular class on it before it chooses to decorate).

Let us know if you wish to explore other techniques, and post up any problems you run into along the way.

Cheers,
Jeff

[tt]Jeff's Page [!]@[/!] Code Couch

http://www.codecouch.com/jeff/blog/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

miregistered · May 25, 2007

Thanks a lot!

That did the job!

monksnake · May 25, 2007

I personally don't like that function. It draws a table, then after it's drawn, changes the row colors.

If you know anything about server side code, that would be the optimum solution.

[monkey]

<.

mmerlinn · May 25, 2007

If you need to change row colors on the fly or because you are generating each page on the fly every time, server side is best.

If your pages are generated only once and remain static for the life of the page, you could write something in some other language you are familiar with to generate the static pages.

In my case, my pages remain static for the life of the page, so I use FoxPro to generate them with alternating row colors. Click the following link for a prototype page (lots of problems with it yet) showing the resulting alternating row colors.

http://home.teleport.com/~tsco/catalog/catalog.htm

mmerlinn

"Political correctness is the BADGE of a COWARD!"

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Alternate color of a table's rows!

miregistered

Technical User

BabyJeffy

Programmer

miregistered

Technical User

monksnake

Programmer

mmerlinn

Programmer

Similar threads

Part and Inventory Search

Sponsor