Row Highlightable DataGrid Demo - Getting Closer!

This demo works in both FireFox and Internet Explorer with some slight flaws. In IE only every other row is highlighted; with FireFox, the Header row is highlighted. But we're getting closer to our end goal!


First NameLast NameEmail
BugsBunnybbunny@wb.com
MickeyMousemmouse@disney.com
DonaldDuckdduck@disney.com
DanMarinodmarino@dolphins.com
SteveStchursstchur@yahoo.com


Source Code
<script language = "javascript">		
startHighlight = function()
{				
	if (document.all && document.getElementById)
	{
		navRoot = document.getElementById("myGrid");
			
		// Get a reference to the TBODY element 
		tbody = navRoot.childNodes[0];
			
		for (i = 0; i < tbody.childNodes.length; i++)
		{
			node = tbody.childNodes[i];
			if (node.nodeName == "TR")
			{
				node.onmouseover=function()
				{
					this.className = "over";								
				}
					
				node.onmouseout=function()
				{
					this.className = this.className.replace("over", "");
				}
			}
		}
	}
}
	
window.onload = startHighlight;			
</script>

<style>
  tr:hover, tr.over { background-color: #ffccff; }
</style>
		

[Return to the article...]