|
|
|
|
Thread Tools | Display Modes |
|
|
Mar 2nd, 2008, 4:59 AM
|
#1 | |
|
Professional Programmer
Join Date: May 2006
Location: UK - London
Posts: 329
Rep Power: 3
 |
Higlight row using DOM
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>
__________________
Quote:
|
|
|
|
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
|
|
Similar Threads
|
||||
| Thread | Thread Starter | Forum | Replies | Last Post |
| Incompatible pointer type (double pointer in a function) | Gabriel Margarido | C | 16 | Nov 23rd, 2007 3:04 AM |
| can someone please help me with this tree | cwl157 | Java | 19 | Oct 27th, 2007 12:35 PM |
| more problems with copying from classes | cwl157 | Java | 0 | Sep 19th, 2007 4:17 PM |
| why does it change both instances | cwl157 | Java | 10 | Sep 18th, 2007 11:01 PM |
| data tree for A* algorithm | cwl157 | Java | 0 | Sep 17th, 2007 3:48 PM |
Threaded Mode