Row Highlightable DataGrid Demo - Getting Closer Still!

This demo fixes the problem in IE where only alternating rows were highlighted. It also provides a fix for IE's Header row being highlighted. All that remains now is to fix the FireFox Header row highlighting problem.


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 = 1; 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 td { background-color: #ffccff; }
</style>
		

[Return to the article...]