Alternating Table Row Color Using the DOM - Every Other Row

for IE5+ and Netscape 6

The DOM level 1 makes this so easy to do it's ridiculous.

1st Police District	24th and Wolf Streets	19145	(215) 686-3010
2nd Police District	Harbison Avenue and Levick Street	19149	(215) 686-3150
3rd Police District	11th and Wharton Streets	19147	(215) 686-3030
4th Police District	11th and Wharton Streets	19147	(215) 686-3040
5th Police District	Ridge Avenue and Cinnaminson Street	19128	(215) 686-3050
6th Police District	11th and Winter Streets	19107	(215) 686-3060

 

First, take a look at the standard method of achieving this effect and the use of the modulus operator (%).

Notice how you have to build all the rows and cells using a script and arrays. With the DOM this isn't necessary. You use the same method of counting off every other row ( (i%2 == 0) ), but rather than building the rows dynamically you simply apply the background color as a style to hard coded table rows using the getElementById() method and childNodes.

Here's how it works:

We're going to identify our table by using an id. In this case we're using id="stripe". We could have also identified it by document.getElementsByTagName('table')[array number] , or if there's only one table in the document we can make r equal to document.getElementsByTagName('tr') .

<table border="1" cellpadding="2" cellspacing="0" id="stripe">
  <tr>
    <td>1st Police District</td>
    <td>24th and Wolf Streets</td>
    <td>19145</td>
    <td>(215) 686-3010</td>
  </tr>
  <tr>
    <td>2nd Police District</td>
    <td>Harbison Avenue and Levick Street</td>
    <td>19149</td>
    <td>(215) 686-3150</td>
  </tr>
	<! -- edited to	save space -->
</table>


<script>
// -- get 'stripe' element (the table), TBODY tag,    children of TBODY (TR tags)
var r=document.getElementById('stripe').childNodes[0].childNodes; 
 // - total number of TR tags belonging to the TBODY tag
var l=r.length
for (i=0;i<l;i++){ 
	if (i%2 == 0){} 
	else {r[i].style.backgroundColor='#cccc66';}
	}
</script>

"Wait a minute", you say. "What's this about a TBODY tag? I didn't see a TBODY tag in that table!". And you're absolutely right.

Even if you don't explicitly include the tag, IE 5+ and Netscape 6 act as if it's there anyway! That means that whether or not you include the tag, you have to account for it in your script. Don't believe me? Try this test.

You should also note that how you identify the table rows will vary according to the construction of the table. The method used here, document.getElementById('stripe').childNodes[0].childNodes will only work if your table doesn't include caption or thead tags. Remember, we're asking for the first child.

If our table contained no thead or tfoot tags we could have used this method:
document.getElementById('stripe').getElementsByTagName('tr')
<!-- get all the tr tags belonging to the table id="stripe" -->
This will also work if the table contains the caption tags.

If our table contained thead tags we would have used this method:
document.getElementById('stripe').getElementsByTagName('tbody')[0].childNodes
<!-- get the child nodes (tr tags) of the first tbody belonging to the table id="stripe" -->
thead and tfoot tags contain tr tags so we need to specify that we only want the ones in the tbody

Click here for a mouseover effect using the setAttribute() method that only works in Netscape 6.

*WARNING!

Some versions of Netscape 6 (ie. the Mac version) treat whitespace as text nodes.

In the table above, each <tr> has 4 childNodes (<td>s). But Netscape 6, because it was counting whitespace, kept insisting that there were 9 childNodes.

In order for this example to work properly in N6 I had to remove ALL the whitespace in the table. Do a 'View Source' to see what I mean.

---

PXL8 2003