Programming Forums - Higlight row using DOM

Programming Forums (http://www.programmingforums.org/forumindex.php)

- JavaScript and Client-Side Browser Scripting (http://www.programmingforums.org/forum23.html)

- - Higlight row using DOM (http://www.programmingforums.org/showthread.php?t=15299)

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>

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.

Re: Higlight row using DOM

Quote:

Originally Posted by Sane (Post 141886)

I solved it by wrapping the <tr></tr> in a tbody, and then manipulating the tbody's class.

Just tried the wrapping and it still behaves the same. I think this is happening because the mouseover event is not being propagated to the cells ancestors. I found a work around which is to get the parent of the cell an set its classname:
elm.parentNode.className = "highlight"

Quote:

Originally Posted by Sane (Post 141886)

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.

The reason I went with JS over CSS is because I find it some browsers don't all support the hover pseudo class for all elements especially IE.

Quote:

Originally Posted by Sane (Post 141886)

Also, enumerating each tr tag in your javascript is odd. Why not directly reference the tag you're looking for?

Please explain further, do you mean give each tr a unique id? If so wouldn't this be more code than now.

Re: Higlight row using DOM

Quote:

Originally Posted by kruptof (Post 141888)

The reason I went with JS over CSS is because I find it some browsers don't all support the hover pseudo class for all elements especially IE.

Really? I've never heard of or encountered such issues with CSS and hovering. Maybe your CSS wasn't standard? I've been able to to all sorts of funky hovering in CSS. However, it does require that you assign ID's to each tbody.

Quote:

Originally Posted by kruptof (Post 141888)

Please explain further, do you mean give each tr a unique id? If so wouldn't this be more code than now.

Well you can give them all the same ID too. It's not "standard", but I've yet to encounter it causing any problems in any browser.