JavaScript - Jak zmienić kolor tła wszystkich TD w TR jednocześnie na Mouseover/Mouseout?

Question

Kiedy I mouseover jeden TD z rzędu chcę, aby wszystkie TDs zmieniły kolor tła w tym samym czasie, a następnie odwrócić na mouseout.

Jak to zrobić?

Answer 1

W CSS można zrobić

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

lub po prostu

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

jeśli TDS nie mają własnego koloru tła.

Oba powinny sprawiać, że wiersz będzie czarny po najechaniu kursorem myszy, a biały w przeciwnym razie.

Można również zrobić to w JavaScript, oczywiście, ale nie jest to konieczne (z wyjątkiem IE6, który nie rozumie pseudo-klasę :hover na niczym, ale <a> znaczników)

Answer 2

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

Można użyć kodu:

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> 

arkusz stylów

.hover { 
    background-color: silver; 
} 

JavaScript

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

Klasa .hover oczywiście może być stylizowana, jak chcesz.

Pozdrawiam i szczęśliwe kodowanie!

Answer 3

w jQuery:

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

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

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

to faktycznie zmienia kolor tła rodzica tr, nie każdy td, ale mogą być łatwo modyfikowane w celu Zrób tak. Można również dołączyć zdarzenia do elementów tr zamiast elementów td, a następnie nie musiałbyś używać parentNode, ale nie wiem, czy musisz zrobić inne rzeczy w procedurze obsługi zdarzeń, szczególnie związanej z td.

Answer 5

Ten jsFiddle stworzyłem pokazy jak to zrobić z jQuery.

Używam zdarzenia jQuery w hover do obsługi tego, co próbujesz zrobić.

Answer 6

Jeśli chcesz rozwiązanie ramową-agnostyk, można spróbować to:

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

Przykład: http://jsfiddle.net/9nh9a/

Choć praktycznie rzecz biorąc, nie byłoby prościej po prostu związać swoją słuchacza do <tr> elementy zamiast elementów <td>? Czy jest jakiś powód, dla którego chcesz słuchać tylko elementów <td>?

Answer 7

nie wiem co twój dokładny use-case jest, ale do takich zadań chciałbym trzymać się tylko 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> 

To jest szybsze niż używając jQuery, nie wszyscy korzystają z 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

Kiedy zrobiłem to we wszystkich skryptu java Zrobiłem to jak ten

<!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 naprawdę nadzieję, że to nie garble to wszystko