Comment changer la couleur de fond de <tr> lors du survol du bouton à l'intérieur de <td>? - javascript, html, css

J'essaie d'implémenter des fonctionnalités CSS, JavaScript ou HTML qui changeront la couleur d'arrière-plan d'une ligne de tableau (<tr>) lorsqu'un bouton situé dans les données de table de cette ligne de table <td> est survolé. En modifiant le fichier CSS, je peux facilement changer la couleur d'arrière-plan du bouton en attribuant un identifiant au bouton, mais je ne sais pas par où commencer pour que l'arrière-plan de la ligne du tableau change également. J'ai examiné des solutions similaires sur ce site mais ils ne sont pas assez précis (ceux que j'ai quand même trouvés) .Toute aide est grandement appréciée.

Réponses:

2 pour la réponse № 1

Tout d'abord, vous devrez obtenir une référence en JavaScript à tous les boutons du tableau (vous pouvez obtenir document.getElementsByTagName pour obtenir tous les boutons, getElementsByName si vous donnez à tous les boutons le même nom (et aucun autre élément), ou getElementsByClassName si vous donnez à tous les boutons la même classe (et aucun autre élément).

// get all of the buttons in the table (I gave them all a class of tablebutton
var buttons = document.getElementsByClassName("tablebutton");

Ensuite, vous devez faire une boucle sur le tableau de boutons et ajouter deux écouteurs d'événements, un pour le mouseover (survolez) l'événement et un pour mouseout (survoler) événement.

for (var i = 0; i < buttons.length; i++) {
var button = buttons[i];
button.addEventListener("mouseover", highlightRow, false);
button.addEventListener("mouseout", unHighlightRow, false);
}

Dans ces écouteurs d'événements, vous devez parcourirl'arborescence DOM du bouton jusqu'à la ligne du tableau, puis définissez la couleur d'arrière-plan de la ligne sur votre couleur en surbrillance ou sur "" pour supprimer la couleur.

function highlightRow ()
{
var row = this.parentNode.parentNode;
row.style.backgroundColor = "red";
}

function unHighlightRow ()
{
var row = this.parentNode.parentNode;
row.style.backgroundColor = "";
}

(vous pouvez également utiliser des fonctions anonymes au lieu de définir les fonctions avec des noms ...

    button.addEventListener("mouseover", function () {
...your code here
}, false);
button.addEventListener("mouseout", function () {
...your code here
}, false);

JSFiddle

---

3 pour la réponse № 2

jQuery:

$("table button").hover(function() {
$(this).closest("tr").css("background-color", "red");
});

Vous devriez vraiment passer du temps à lire le jQuery docs.

---

0 pour la réponse № 3

Avez-vous essayé de changer le tr"styles de survol?

http://jsfiddle.net/x2pLV/

table {
width: 100%;
}

tr:hover {
background: orange;
}

<table>
<tr>
<td><input type="submit" /></td>
</tr>
</table>

---

0 pour la réponse № 4

J'ai aimé l'idée de ne pas utiliser jQuery, voici un violon:

var allButtons = document.getElementsByTagName("button");
for(var i=0; i < allButtons.length; ++i) {
if(allButtons[i].getAttribute("class") == "hoverme") {
allButtons[i].onmouseover = function() { makerow(this, "blue"); };
allButtons[i].onmouseout = function() { makerow(this, "yellow"); };
}
}

function makerow(elem, color) {
elem.parentNode.parentNode.style.backgroundColor = color;
}

Le code dépend quelque peu de la structure de votre table, donc voir ci-joint par exemple: http://jsfiddle.net/JFd5T/

---

0 pour la réponse № 5

Je suppose que vous souhaitez supprimer la surbrillance lorsquequitter la rangée aussi. Dans ce cas, si vous optez pour jQuery, vous devrez également supprimer ce style, mais optez plutôt pour une seule action à la fois pour le survol et l’arrêt.

$("td.data").hover(
function () {
$(this).parent("tr").toggleClass("active");
}

et ajoutez un style pour cette classe dans votre css:

.active {
background-color: pink;
}

vous devrez modifier le sélecteur pour qu'il corresponde aucellules ou élément que vous souhaitez déclencher le changement, mais je ne peux pas "voir le balisage donc" ne peut pas fournir exactement cela - le sélecteur ci-dessus a les données de classe sur vos cellules de données.

Btw je suis d'accord qu'une solution non jquery comme Scott "s est la voie à suivre si vous n'utilisez pas déjà jQuery.

---