9

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?

2
  • 5
    Why are so many people posting jQuery solutions when there is no mention of jQuery at all in the question?! Aug 3, 2011 at 12:13
  • jQuery is one of the fastest growing technology on the internet at the moment and many people seems to think of jQuery as a synonym of javascript - it worries me too Aug 3, 2011 at 12:26

11 Answers 11

16

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)

0
5
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.

0
5
<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>
2
  • Might want to add an explanation
    – Huey
    Jul 29, 2015 at 12:05
  • if we want to highlight the current row then we can use this in table
    – Phani CR
    Aug 26, 2015 at 8:07
2

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/

1
<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.

0

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.

0

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?

0
<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>
0

$(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!

0

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";
    });
}
-1

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

1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.