It sounds like you're trying to do it the hard way.
Next question is what browsers do you need to support w/ the rollover
effect? It can be done entirely via CSS on most everything post IE-6.
No javascript required. Just add this line:
tr:hover {background-color:#eed;}
The click event (which is neither a mouseenter/mouseleave, which is
what you asked about), can be handled by attaching a single handler to
the table, which you've described as sticking around.
Event.observe('someTable', 'click', function(event) {
var element = Event.element(event).up('tr');
console.log(element);
});
No setup/teardown required. Full sample code at end.
TAG
On Jul 10, 1:07 pm, kstubs <
kst...@gmail.com> wrote:
> Color the row pink on rollover (mostly). There is also a click event on the
> row for navigating to a new page based on which row you are on.
======= SAMPLE =========
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="
https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/
prototype.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
table{ margin: 30px auto 0 auto;}
td {border:1px solid blue;}
tr:hover {background-color:#eed;}
</style>
</head>
<body>
<table id="someTable"><tbody>
<tr id="tr1">
<td>Lorem</td><td>ipsum</td><td>dolor</td>
</tr>
<tr id="t2">
<td>sit</td><td>amet,</td><td>consectetur</td>
</tr>
<tr id="t3">
<td>adipisicing</td><td>elit</td><td>sed.</td>
</tr>
</tbody></table>
<script type="text/javascript" charset="utf-8">
//<![CDATA[
Event.observe('someTable', 'click', function(event) {
var element = Event.element(event).up('tr');
console.log(element);
});
//]]>
</script>
</body>
</html>