« Stellent Developer Bex Huff Strikes Off on His Own | Main

Alternating Table Row Color Problem

I've been struggling with finding a good way to create a table that works cross browsers with alternating row colors. I don't want each row identified with a different class - because I don't want future inserts into the table to require changing the classes of each subsequent row.

This is where the script I used came from:

<script>
function alternate(id){
if(document.getElementById){ //check that browser has capabilities
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";
}
} }
}
}

</script>

Then I set two classes with CSS:
.odd{background-color:#FFEBAE;}
.even{background-color:white;}

Then in the HTML:
<body onLoad="alternate('ContactTable')">

This seems to work on IE and NOT on Firefox. I think there's an error in the code. What I did was take the code the site gave - and stripped it down so it didn't have the other alternating row color options. I'm not enough of a javascript person to trouble shoot.

The page with the code I started with works fine in Firefox (I downloaded this from the site mentioned above).

This CSS table gallery gives some very good ideas about ways to make CSS tables look good.

TrackBack

TrackBack URL for this entry:
http://blog.lib.umn.edu/cgi-bin/mt-tb.cgi/26659

Comments

Added a header row!

Here it is in action https://wiki.umn.edu/twiki/bin/view/StellentWCM/RFPRequirements


.odd{background-color:white;}
.even{background-color:#FFEBAE;}
.head{background-color:#C26970;color:white;text-align:center;}


alternate("tableID");

function alternate(id){
if(document.getElementById){ //check that browser has capabilities
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i if(i % 2 == 0){
if(i == 0){ //if it is the first row
rows[i].className = "head";
}
else{
rows[i].className = "even";
}
}
else{
rows[i].className = "odd";

}
} }
}
}

Post a comment

(If you haven't left a comment here before, you may need to be approved by the site owner before your comment will appear. Until then, it won't appear on the entry. Thanks for waiting.)