JavaScript - 如何在Mouseover/Mouseout上同時更改TR中所有TD上的背景顏色？

Question

當我連續一個TD時，我希望所有的TD都同時改變背景顏色，然後在mouseout上反轉。

我該怎麼做？

Answer 1

在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>標籤）

Answer 2

$（selector）.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類顯然可以根據你的喜好來設計。

關心和快樂編碼！

Answer 3

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

Answer 4

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專門相關的事件處理程序中執行其他操作。

Answer 5

這jsFiddle我創建節目你怎麼用jQuery來做到這一點。

我正在使用jQuery的hover事件來處理您正在嘗試執行的操作。

Answer 6

如果你想要一個框架無關的解決方案，你可以試試這個：

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>元素？

Answer 7

我不知道您的具體使用情況是什麼，但對於這樣的任務，我會堅持只有CSS：

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

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

Answer 8

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

Answer 9

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

Answer 10

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

Answer 11

當我在所有的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> 

我真的希望這不會斷章取義這一切