Alternating Table Row Color Using the DOM - Groups of Rows

for IE5+ and Netscape 6

If you haven't done it already, read the tutorial on alternating color of every other table row.
It provides a foundation for this lesson.

_____________________________________________

Done? Okay. In the tutorial for every other row, each row in the table represents one record. This works fine if each record contains only a few fields. But when you have many fields that need to be displayed, it sometimes makes better visual sense to break them up into multiple rows. The address book below does just this, using 3 rows for each record.

 

Address Book

Last Name :	Nguyen	First Name :	Tony	Middle Init. :
Street :	1085 S 8th St	City :	Philadelphia	State :	PA
Zip :	19147	Phone :	215-555-0001	Fax :	215-555-0002
Last Name :	Alvarez	First Name :	Maria	Middle Init. :	I
Street :	999 Morris St	City :	Philadelphia	State :	PA
Zip :	19148	Phone :	215-555-1234	Fax :
Last Name :	Scarpa	First Name :	Nico	Middle Init. :	A
Street :	985 Annin St	City :	Philadelphia	State :	PA
Zip :	19147	Phone :	215-555-9999	Fax :	609-555-8888
Last Name :	Kennedy	First Name :	Francis	Middle Init. :	X
Street :	375 Daly St	City :	Philadelphia	State :	PA
Zip :	19148	Phone :	215-555-2525	Fax :	215-555-6666

 

Adding color to every other record makes it easier to visually distinguish individual records. Now, obviously, if you're hard coding the table this is no problem. The challenge comes when need to do this with dynamically generated data.

I recently faced just this problem. The template language used by the site I'm working on doesn't allow this to be done when the template is processed. What I needed was a client-side solution. Here's what I came up with :

 

<table border="1" cellpadding="2" cellspacing="0" id="addressBook">
  <caption>Address Book</caption>
<!-- here's the first record group -->
  <tr>
    <td>Last Name : </td><td>Nguyen</td>
    <td>First Name : </td><td>Tony</td>
    <td>Middle Init : </td><td>&nbsp;</td>
  </tr>
  <tr>
    <td>Street : </td><td>1085 S 8th St</td>
    <td>City : </td><td>Philadelphia</td>
    <td>State : </td><td>PA</td>
  </tr>
  <tr>
    <td>Zip : </td><td>19147</td>
    <td>Phone : </td><td>215-555-0001</td>
    <td>Fax : </td><td>215-555-0002</td>
  </tr>
	<! -- end of first record group / the rest edited out to save space -->
</table>


<script>
var rows = document.getElementById('addressBook').getElementsByTagName('tr');
var numRows=rows.length;
// --var grouping is the number of rows constituting one record
var grouping = 3;
// -- var rowGroups is the total number of records displayed
var rowGroups = numRows / grouping;
var n = 0;

for (i=0; i < rowGroups; i++){

	if (i%2 == 0){ n = n +grouping;}
	else {
		for (y=0; y < grouping; y++)
  			rows[n++].style.backgroundColor='#cccc66';
		}
}
</script>

var n is used to hold the array number for the tr tags. The first for loop uses the number of records contained in the table. On the row groups that will not change color, we merely increment n by the number of rows represented by grouping. On the row groups that will be colored, we execute another loop based on the number of rows in the group, setting the row style and incrementing n at each pass.

 

---

PXL8 2003