I am trying to highlight a row in table when the user mouse overs the row. I am trying to do this by changing the className of the row to a CSS selector class which will change the background color. But instead of the whole row highlighting i am getting only cell in the row highling which is the one the mouse is over.
Below is the code for the page, had to put the style and scripts on the same page as the markup for the example and also i know this won't work across browsers because it's just an example:
<html>
<head>
<style>
.highlight
{
background-color:yellow;
}
</style>
</head>
<body>
<table>
<tr class="header">
<th>Subject</th>
<th>From</th>
<th>Date</th>
</tr>
<tr class="mail">
<td>Hello World</td>
<td>Kruptof</td>
<td>Today</td>
</tr>
</table>
</body>
<script type="text/JavaScript">
tr = document.getElementsByTagName("tr");
for(i=0;i<tr.length;i++)
{
if(tr[i].className == "mail")
{
tr[i].addEventListener('mouseover',highlight,false);
}
}
function highlight(e)
{
var elm = e.target;
elm.className = "highlight";
}
</script>
</html>