JavaScript-как я могу изменить цвет фона на всех TDs в TR одновременно при наведении мыши / Mouseout?

Когда Я mouseover один TD подряд я хочу, чтобы все TDs одновременно меняли цвет фона, а затем переключались на mouseout.

Как мне это сделать?

8
css javascript xhtml

11 ответов

в CSS вы можете сделать

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

или просто

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

если tds не имеют свой собственный цвет фона.

оба должны сделать строку черной при наведении мыши и Белой в противном случае.

вы также можете сделать это в Javascript, конечно, но это не обязательно (за исключением IE6, который не понимает :hover псевдо-класс ни на что, кроме <a> теги)

14
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";  
    }
}

это фактически изменяет цвет фона родителя tr, а не td, но для этого его можно легко изменить. Вы также можете прикрепить события tr элементы вместо td элементы, и тогда вам не придется использовать parentNode, но я не знаю, нужно ли вам делать другие вещи в обработчике событий, специально связанные с td.

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

Я не знаю, каков ваш точный вариант использования, но для таких задач я бы придерживался только CSS:

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

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

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

это быстрее, чем использование jQuery, также не все используют jQuery.

1

этой jsFiddle Я создал показывает вам, как это сделать с jQuery.

Я использую jQuery hover событие, чтобы понять, что вы пытаетесь сделать.

0

если вы хотите рамочно-агностическое решение, вы можете попробовать следующее:

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

пример:http://jsfiddle.net/9nh9a/

хотя, практически говоря, не было бы проще просто привязать слушателя к <tr> элементы вместо <td> элементов? Есть ли какая-то причина, по которой вы хотите слушать только на <td> элементов?

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

$(селектор).события мыши: mouseenter(handlerIn).mouseleave(handlerOut);

вы можете использовать такой код:

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>

стиль

.hover {
    background-color: silver; 
}

JavaScript

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

на .hover класс, очевидно, может быть оформлен так, как вам нравится.

С уважением и удачи в кодировании!

0

в jQuery:

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

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

или в 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";
    });
}
0

когда я сделал это во всех Java-скриптах, я сделал это так

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

Я действительно надеюсь, что это не искажает все это

-1