JavaScript - How can I change the background color on all TDs in a TR at the same time on Mouseover/Mouseout?

Question

When I mouseover one TD in a row I want all the TDs to change background color at the same time, then reverse on mouseout.

How do I do this?

Answer 1

In CSS you could do

tr td { background-color: white }
tr:hover td { background-color: black };

or just

tr { background-color: white }
tr:hover { background-color: black };

if the tds don't have their own background color.

Both should make the row black on mouseover, and white otherwise.

You could also do it in Javascript of course, but that isn't necessary (except for IE6, which doesn't understand the :hover pseudo-class on anything but <a> tags)

Answer 2

var tds = document.getElementsByTagName("td");
for(var i = 0; i < tds.length; i++) {
    tds[i].onmouseover = function() {
       this.parentNode.style.backgroundColor = "#ff0000";
    }
    tds[i].onmouseout = function() {
      this.parentNode.style.backgroundColor = "#fff";  
    }
}

This actually changes the background colour of the parent tr, not each td, but it could be easily modified to do so. You could also attach the events to the tr elements instead of the td elements, and then you wouldn't have to use parentNode, but I don't know whether you need to do other stuff in the event handler specifically related to the td.