Comment sélectionner le tr d’un td avec du JavaScript vanilla ? – JavaScript – Forums SitePoint

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 et il suffisait de :

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 !

to www.sitepoint.com

---

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

---