|
|
 |
|
|
Thread Tools | Display Modes |
Mar 2nd, 2008, 5:59 AM
|
#1 | |
|
Professional Programmer
Join Date: May 2006
Location: UK - London
Posts: 333
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:
|
|
|
|
|
Mar 2nd, 2008, 8:39 AM
|
#2 |
|
Programming Guru
 
Join Date: Apr 2005
Location: Waterloo, Ontario
Posts: 2,035
Rep Power: 6
 |
Re: Higlight row using DOM
I remember trying to manipulate the styles of individual rows in tables, and I was running into similar problems.
I solved it by wrapping the <tr></tr> in a tbody, and then manipulating the tbody's class.<tbody class="mail"><tr> <td>Hello World</td> <td>Kruptof</td> <td>Today</td> </tr></tbody> Hope that helps. Also, enumerating each tr tag in your javascript is odd. Why not directly reference the tag you're looking for? And of course, you're going to need to update that code to look for the mail tbody, instead of the mail tr. Oh, and your javascript can be substituted with something stabler, quicker, and more compatible: CSS. Unless you need to do more than alter the hover colour.
__________________
Looking for tough programming challenges? Try participating in Sane's Monthly Algorithms Challenges! Composing Techno is a little side hobby of mine. Techno by DJ Sane. All free for download. |
|
|
|
|
Mar 2nd, 2008, 10:33 AM
|
#3 | ||||
|
Professional Programmer
Join Date: May 2006
Location: UK - London
Posts: 333
Rep Power: 3
|
Re: Higlight row using DOM
Quote:
elm.parentNode.className = "highlight" Quote:
Quote:
__________________
Quote:
|
||||
|
|
|
|
Mar 2nd, 2008, 12:54 PM
|
#4 | ||
|
Programming Guru
Join Date: Apr 2005
Location: Waterloo, Ontario
Posts: 2,035
Rep Power: 6
|
Re: Higlight row using DOM
Quote:
Quote:
__________________
Looking for tough programming challenges? Try participating in Sane's Monthly Algorithms Challenges! Composing Techno is a little side hobby of mine. Techno by DJ Sane. All free for download. |
||
|
|
|
|
| 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 4:04 AM |
| can someone please help me with this tree | cwl157 | Java | 19 | Oct 27th, 2007 1:35 PM |
| more problems with copying from classes | cwl157 | Java | 0 | Sep 19th, 2007 5:17 PM |
| why does it change both instances | cwl157 | Java | 10 | Sep 19th, 2007 12:01 AM |
| data tree for A* algorithm | cwl157 | Java | 0 | Sep 17th, 2007 4:48 PM |
Linear Mode
