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

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?

---

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)

---

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.

---

<table border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th></th>
        <th>Water</th>
        <th>Air</th>
        <th>Fire</th>
        <th>Earth</th>
    </tr>
    <tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
        <td>Spring thunderclouds</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>No</td>
        <td>No</td>
    </tr>
    <tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
        <td>Roasting chestnuts</td>
        <td>No</td>
        <td>No</td>
        <td>Yes</td>
        <td>Yes</td>
    </tr>
    <tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
        <td>Winter snowbanks</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>No</td>
        <td>Yes</td>
    </tr>
    <tr onmouseover="ChangeBackgroundColor(this)" onmouseout="RestoreBackgroundColor(this)">
        <td>Ice cream on a hot summer day</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
        <td>Yes</td>
    </tr>
</table>
<script type="text/javascript">
    // Specify the normal table row background color
    //   and the background color for when the mouse 
    //   hovers over the table row.

    var TableBackgroundNormalColor = "#ffffff";
    var TableBackgroundMouseoverColor = "#9999ff";

    // These two functions need no customization.
    function ChangeBackgroundColor(row) {
        row.style.backgroundColor = TableBackgroundMouseoverColor;
    }

    function RestoreBackgroundColor(row) {
        row.style.backgroundColor = TableBackgroundNormalColor;
    }
</script>

---

I don't know what your exact use-case is, but for such tasks I would stick to CSS only:

td {
    background: #f00; }
tr:hover td {
    background: #fc0; }

http://jsfiddle.net/feeela/53JBV/

---

<td onmouseover="changeColorTo(this.parentNode, put color here)" onmouseout="changeColorTo(this.parentNode, put color here)">
...
<script>
    function changeColorTo(parent, color)
    {
        var i, tdArray = parent.getElementsByTagName('td');
        for(i in tdArray)
        {
            tdArray[i].style.backgroundColor = color;
        }
    }
</script>

This is faster than using jQuery, also, not everybody uses jQuery.

---

This jsFiddle I created shows you how to do it with jQuery.

I am using jQuery's hover event to handle what you are trying to do.

---

If you want a framework-agnostic solution, you can try this:

function highlightCells(tableRow) {
    for (var index = 0; index < tableRow.childNodes.length; index++) {
        var row = tableRow.childNodes[index];
        if (row.style) {
            row.style.backgroundColor = "red";
        }
    }
}

function unhighlightCells(tableRow) {
    for (var index = 0; index < tableRow.childNodes.length; index++) {
        var row = tableRow.childNodes[index];
        if (row.style) {
            row.style.backgroundColor = "white";
        }
    }
}

Example: http://jsfiddle.net/9nh9a/

Though practically speaking, wouldn't it be simpler to just bind your listener to the <tr> elements instead of the <td> elements? Is there some reason you want to listen only on the <td> elements?

---

<style type="text/css">
.table1 tr:hover td{
    background-color:#ccc;
}
</style>
<table class="table1">
    <tr>
        <td>cell 1-1</td>
        <td>cell 1-2</td>
        <td>cell 1-3</td>
        <td>cell 1-4</td>
    </tr>
    <tr>
        <td>cell 2-1</td>
        <td>cell 2-2</td>
        <td>cell 2-3</td>
        <td>cell 2-4</td>
    </tr>
    <tr>
        <td>cell 2-1</td>
        <td>cell 2-2</td>
        <td>cell 2-3</td>
        <td>cell 2-4</td>
    </tr>
</table>

---

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

You can use code like this:

HTML

<table>
    <tr>
        <td>cell1,1</td>
        <td>cell1,2</td>
        <td>cell1,3</td>
    </tr>
        <tr>
        <td>cell2,1</td>
        <td>cell2,2</td>
        <td>cell2,3</td>
    </tr>
</table>

Style sheet

.hover {
    background-color: silver; 
}

JavaScript

$("td").hover(
  function () {
    $(this).parent("tr").addClass("hover");
  },
  function () {
    $(this).parent("tr").removeClass("hover");
  }
);

The .hover class obviously can be styled as you like.

Regards and happy coding!

---

In jQuery:

$('td').mouseover(function( obj ) {
    $(obj).parent().children().css("background-color","green");
});

$('td').mouseout(function( obj ) {
    $(obj).parent().children().css("background-color","red");
});

Or in Javascript:

var tds = document.getElementsByTagName( "td" );

for( var i = 0; i < tds.length; i++ ) {
    tds[i].addEventListener("mouseover",function(){
        var children = this.parentNode.getElementsByTagName("td");

        for( var j = 0; j < children.length; j++ )
            children[j].style.background-color = "green";
    });

    tds[i].addEventListener("mouseout",function(){
        var children = this.parentNode.getElementsByTagName("td");

        for( var j = 0; j < children.length; j++ )
            children[j].style.background-color = "red";
    });
}

---

When I did it in all java script I did it like this

<!DOCTYPE html>
<html>
<head>
<title>Chapter 11 Problem 1</title>
<script>
function blueText()
{
var paragraphObject = document.
getElementById("Paragraph");
paragraphObject.style.color = 'blue',
paragraphObject.style.background= 'white';
}

function whiteText()
{
var paragraphObject = document.
getElementById("Paragraph");
paragraphObject.style.color = 'white',
paragraphObject.style.background = 'blue';
}
</script>

</head>
<body>
<p id="Paragraph" style = "color:white; background-color:blue";
onmouseover="blueText()" onmouseout="whiteText()">
Paragraph Text
</p>
</body>
</html>

I really hope this doesn't garble it all up