Creating A Table Row Mouseover Effect Dynamically using the DOM

Most table row mouseover effects ( or table rulers ) are created by hard-coding in some variety of style classes and/or event handlers. The techniques described here let you skip the hard-coding and instead apply the effects using a script that loads at the end of the page. There are three techniques described below. Each works with a different set of browsers with the last technique being the one compatible with the most browsers. The first two techniques both use setAttribut().

 

setAttribute() for Netscape 6+ and Mozilla 1+

Netscape 6+ and Mozilla 1+ ONLY!!

Netscape 6 is the only browser that provides consistent support for setAttribute(). See "Browser Inconsistency in Implementing setAttribute(), getAttribute(), and removeAttribute()" for more information.


Table id="hilite"
1st Police District24th and Wolf Streets19145(215) 686-3010
2nd Police DistrictHarbison Avenue and Levick Street19149(215) 686-3150
3rd Police District11th and Wharton Streets19147(215) 686-3030
4th Police District11th and Wharton Streets19147(215) 686-3040
5th Police DistrictRidge Avenue and Cinnaminson Street19128(215) 686-3050
6th Police District11th and Winter Streets19107(215) 686-3060

Start by identifing the table by using an id. In this case we're using id="hilite". 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') .

Next, we assign onmouseover and onmouseout values to each table row using setAttribute(attribute name, value). 


<table border="1" cellpadding="2" cellspacing="0" id="hilite">
  <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 the TR tags that are contained in the 'hilite' element (the table)
var r=document.getElementById('hilite').getElementsByTagName('tr'); 
// - total number of TR tags
var l=r.length; 

var startColor = document.getElementsByTagName("body")[0].style.backgroundColor
for (i=0;i<l;i++){
     r[i].setAttribute('onmouseover','this.style.backgroundColor="#fff" ');
     r[i].setAttribute('onmouseout','this.style.backgroundColor=" '+startColor+' " ');
    }
</script>


setAttribute() for IE5+

IE5+ ONLY!!

Still using setAttribute but with a slightly different syntax - setAttribute('onmouseover',function anonymous(){this.style.backgroundColor="#fff"}). See "Browser Inconsistency in Implementing setAttribute(), getAttribute(), and removeAttribute()" for more information.


Table id="hilite2"
1st Police District24th and Wolf Streets19145(215) 686-3010
2nd Police DistrictHarbison Avenue and Levick Street19149(215) 686-3150
3rd Police District11th and Wharton Streets19147(215) 686-3030
4th Police District11th and Wharton Streets19147(215) 686-3040
5th Police DistrictRidge Avenue and Cinnaminson Street19128(215) 686-3050
6th Police District11th and Winter Streets19107(215) 686-3060
<script>
var r2=document.getElementById('hilite2').getElementsByTagName('tr'); 
var l=r.length; 

for (i=0;i<l;i++){
     r2[i].setAttribute('onmouseover',function anonymous(){this.style.backgroundColor="#fff"});
     r2[i].setAttribute('onmouseout',function anonymous(){this.style.backgroundColor=""});
    }
</script>

 

Mouseover effect for most browsers

This technique forgoes the use of setAttribute and assigns a function directly to an event handler.

Table id="hilite3"
1st Police District24th and Wolf Streets19145(215) 686-3010
2nd Police DistrictHarbison Avenue and Levick Street19149(215) 686-3150
3rd Police District11th and Wharton Streets19147(215) 686-3030
4th Police District11th and Wharton Streets19147(215) 686-3040
5th Police DistrictRidge Avenue and Cinnaminson Street19128(215) 686-3050
6th Police District11th and Winter Streets19107(215) 686-3060
<script>
var r3=document.getElementById('hilite3').getElementsByTagName('tr'); 
var l=r.length; 

for (i=0;i<l;i++){
     r3[i].onmouseover = function(){this.style.backgroundColor="#fff"};
     r3[i].onmouseout = function(){this.style.backgroundColor=""};
    }
</script>

 

Now try combining it with the script for alternating row color


Table id="stripe"
1st Police District24th and Wolf Streets19145(215) 686-3010
2nd Police DistrictHarbison Avenue and Levick Street19149(215) 686-3150
3rd Police District11th and Wharton Streets19147(215) 686-3030
4th Police District11th and Wharton Streets19147(215) 686-3040
5th Police DistrictRidge Avenue and Cinnaminson Street19128(215) 686-3050
6th Police District11th and Winter Streets19107(215) 686-3060

<script>
var r=document.getElementById('stripe').getElementsByTagName('tr'); 
var l=r.length; 

for (i=0;i<l;i++){
 r[i].onmouseover =  function(){this.style.backgroundColor="#fff"};
 if (i%2 == 0){ 
  r[i].onmouseout = function(){this.style.backgroundColor="";}
 }
 else {
  r[i].style.backgroundColor='#cccc66';
  r[i].onmouseout = function(){this.style.backgroundColor="#cc6";}
 }
}
</script>

*WARNING!

Netscape 6+ treats whitespace as text nodes, even when the whitespace occurs between closing and opening tr tags
(ex: </tr> <tr>).

In the tables 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 between the tags in the table. Do a 'View Source' to see what I mean.







PXL8 2002-2004