plierqh1
12 novembre 2023, 14h40
1
J’ai le code HTML suivant.
<tr>
<td class="a">
<td class="b">
</tr>
<tr>
<td class="a">
<td class="b">
<td class="c">
</tr>
Je veux ça n’importe quoi <tr> qui a <td class="c"> obtiendra une couleur de fond jaune.
Quelle est la meilleure façon de faire cela avec Vanilla JavaScript ?
Si parentNode était un méthode au lieu d’un propriété Je pourrais faire quelque chose comme ce pseudocode :
document.querySelector(".c").parentNode("tr").style.background = "yellow";
Y a-t-il des “uppermostDifferentParent« propriété à utiliser ici ?
PaulOB
12 novembre 2023, 15h16
2
document.querySelector('.c').parentNode(tr).style.background = "yellow";
Peut-être quelque chose comme ça :
const myElem = document.querySelectorAll(".c");
myElem.forEach(function (elem, index) {
elem.closest("tr").style.background = "yellow";
});
Bien que je préférerais utiliser CSS pour styliser les choses en utilisant une classe.
2 J’aime
plierqh1
12 novembre 2023, 15h35
3
Ça a marché ! Merci beaucoup.
J’ai également corrigé toutes les erreurs de syntaxe que j’avais dans la question.
1 J’aime
Bien que je préférerais utiliser CSS pour styliser les choses en utilisant une classe.
Il semble qu’il serait plus facile d’ajouter simplement une classe au tableau, par exemple
HTML
<table id='my-table'>
<tr>
<td class="a">item 1</td>
<td class="b">item 2</td>
</tr>
<tr>
<td class="a">item 1</td>
<td class="b">item 2</td>
<td class="c">item 3</td>
</tr>
</table>
CSS
table.hightlight-a .a,
table.hightlight-b .b,
table.hightlight-c .c {
background-color: yellow;
}
JS
const table = document.querySelector('#my-table');
// to highlight the 'c's
table.classList.add('hightlight-c');
edit : supprimez ce qui précède. Comme Paul l’a souligné, c’est la ligne du tableau qui doit être stylisée et non les cellules.
kické
12 novembre 2023, 16h05
6
Si
parentNodeétait un méthode au lieu d’un propriété Je pourrais faire quelque chose comme ça
Dans ce scénario particulier, le parent d’un <td> sera toujours un <tr>il n’y a donc aucune raison pour que vous ne puissiez pas simplement utiliser .parentNode ou parentElement.
document.querySelector('.c').parentElement.style.background = 'yellow';
PaulOB
12 novembre 2023, 16h13
7
Il semble qu’il serait plus facile d’ajouter simplement une classe au tableau, par exemple
Qui serait stylisez uniquement le td lui-même et non le parent tr qui fournit un arrière-plan à toute la ligne
Qui serait stylisez uniquement le td lui-même et non le parent tr qui fournit un arrière-plan à toute la ligne
Oops! J’ai raté ce détail. Jetez ça alors.
.highlight-a tr:has(.a),
.highlight-b tr:has(.b),
.highlight-c tr:has(.c) {
background-color: yellow;
}
.a n’est toujours pas prêt pour les heures de grande écoute, donc je suppose que nous revenons au JS et aux éléments parents.
1 J’aime
PaulOB
12 novembre 2023, 16h29
9
.a n’est toujours pas prêt pour les heures de grande écoute, donc je suppose que nous revenons au JS et aux éléments parents.
Oui, j’avais une version CSS
tr:has(td.c){background:yellow;}
Aucun J n’a été blessé du tout
Le css : a une propriété est désormais pris en charge jusqu’à 89 %, ce qui correspond à tous les principaux navigateurs.
2 J’aime
Aucun J n’a été blessé du tout
Je ne savais pas si le JS était là pour ajouter le style de manière dynamique, par exemple peut-être en un clic. Sinon, comme vous le soulignez, pas de JS – ce qui est bien
2 J’aime
plierqh1
12 novembre 2023, 16h38
11
Il semble qu’il serait plus facile d’ajouter simplement une classe au tableau, par exemple
Je ne peux pas vraiment contrôler la sous-table elle-même car elle est générée par un système de gestion de contenu et beaucoup plus longue que d’en avoir seulement deux ou trois. td éléments.
Dans ce scénario particulier, le parent d’un
<td>sera toujours un<tr>il n’y a donc aucune raison pour que vous ne puissiez pas simplement utiliser .parentNode ou parentElement.
Oui, cela a également fonctionné, c’est bon de le savoir. Merci !
Abonnez-vous à notre page Facebook: https://www.facebook.com/mycamer.net
Pour recevoir l’actualité sur vos téléphones à partir de l’application Telegram cliquez ici: https://t.me/+KMdLTc0qS6ZkMGI0
Nous ecrire par Whatsapp : Whatsapp +44 7476844931