Simple Rollover Highlight Trouble

JavaScript
1 
<script type="text/javascript">

function addEventHandler(objectNode, eventType, func, capture) {
	if (objectNode.attachEvent) {
		objectNode.attachEvent("on" + eventType, func); 
	}
	else {
		objectNode.addEventListener(eventType, func, capture);
	}
}

function initializeEventHandlers() {
    function() { highlightCells(); }
}

function highlightCells() {
	var table = document.getElementsByTagName("table")[0];
	var rows = table.getElementsByTagName("tr");
	for (var i = 0; i < rows.length; i++) {
		addEventHandler(rows[i], "MouseOver", function() { rows[i].style.color = "blue"; }, false);
	}
}

addEventHandler(window, "load", function(event) { initializeEventHandlers(); }, false);

</script>

I know this is really basic, but I can’t even find out why I’m getting absolutely no output on the page.

This is a standard table, and a long one at that so I decided not to post it. It is the first table on the page.

If someone can tell me how to accomplish this rollover highlight onMouseover, I’d greatly appreciate it.

2

You may find the following CSS helpful:


.yourtable tr{
    background-color: #fff; /* default background colour */
}
.yourtable tr:Hover{
    background-color: #ccf; /* mouseover background colour */
}

Where the table involved has class=“yourtable”.

I know its not a Javascript solution but I’d much rather the CSS solution.

3

Yeah thanks, I definitely could do that; I’m just practicing JavaScript now and I’m trying to find solutions to some problems that arise when I’m learning the language.

4

Ok then :slight_smile: Though in practise I’d recommend against a JavaScript solution if there are a lot of rows because you’re assigning a function to every individual one.

First of all - you want to highlight the rows. Did you mean background colour or text colour? Because your code seems to be changing the ‘color’ attribute which is for text colour.

Secondly, if you modify the function to alert something instead of change the colour, is anything alerted when you mouseover the rows?

5

First, yes I meant color just because it would still show an apparent change and I was too lazy to type the other lol.

Second, here’s the code:

function highlightCells() {
    alert("test");
	var table = document.getElementsByTagName("table")[0];
	var rows = table.getElementsByTagName("tr");
	for (var i = 0; i < rows.length; i++) {
		addEventHandler(rows[i], "MouseOver", function() { alert("testtt") }, false);
	}
}

The first “test” alert appears, but the subsequent ones upon hovering do not.

6

jQuery Solution:

$(function() {
	$("#table-main tr").hover(function() {
		$(this).addClass("active");
	},
	function() {
		$(this).removeClass("active");
	});
});

#table-main tr.active { background: #a9a9a9; }
7

Hah thanks, I’m about to move into studying JQuery. Basically I wanted to have a decent foundation in JavaScript before moving into JQuery, one of which the practice samples was making the hover-highlight table in JavaScript.

But I guess it’s never too early to start JQuery.