Récupération de l'indice d'un tableau

Récupérer l'indice du tr avec un élément de select

Anonyme

16 septembre 2021 à 12:39:05

bonjour à tous,

je cherche un moyen de récupérer l'indice d'un <tr> dans un tableau après avoir sélectionner un élément de select <td> de ce <tr>

LucasWerquin

16 septembre 2021 à 13:23:27

Oulà !
Ne pas confondre tableau HTML et array ( qui est traduit par "tableau" en français, ce que je trouve pas terrible ).

Bon, vu que tu ne donne pas de code, je vais essayer de raisonner "à l'aveugle". Tu as donc un tableau HTML, contenant plusieurs lignes ( <tr> ) qui elles-mêmes contiennent une ( ou plusieurs ) cellules ( <td> ) qui elles-mêmes contiennent un select.
Et donc quand l'utilisateur choisit une option de ce select, tu veux savoir à quelle ligne de tableau ça se passe ?

Pour moi, le plus simple consisterait à donner un attribut ( par exemple "lineNumber" ) à tes <tr>, qui aurait pour valeur le numéro de la ligne ( la première <tr> serait donc <tr lineNumber=1>, etc.

Ensuite, il faut ajouter un eventListener sur ta balise select :

document.getElementsByClassName('mesSelects').addEventListener('change', function(event) {
   var numeroDeLigne = event.target.parentElement.getAttribute('lineNumber');
   console.log(numeroDeLigne);
};

JCninho87

17 septembre 2021 à 9:08:36

faire un tour ici https://javascript.info/searching-elements-dom#closest

JCninho87

LucasWerquin

17 septembre 2021 à 9:19:29

Oops !

Grosse erreur de ma part dans le petit bout de code ci-dessus, que j'ai fait à la volée.

getElementsByTagName() va te renvoyer un array d'éléments HTML. Donc il faut boucler dessus pour ajouter les eventListeners à tous les éléments de ce array.

Petit exemple plus concret et fonctionnel que j'ai testé avant de le publier, cette fois :

HTML :

<!DOCTYPE html>
<html>
    <head>
        <!-- En-tête de la page -->
        <meta charset="utf-8" />
        <title>Mon title</title>

    </head>
    
    <body>
        
        <header><!-- Placez ici le contenu de l'en-tête de votre page -->
			<h1>Mon titre</h1>
		</header>
		
        <section>
            <table>
                <tr lineNumber=1>
                    <td class="cells">Une cellule</td><td class="cells">Une cellule</td>
                </tr>
                <tr lineNumber=2>
                    <td class="cells">Une cellule</td><td class="cells">Une cellule</td>
                </tr>
                <tr lineNumber=3>
                    <td class="cells">Une cellule</td><td class="cells">Une cellule</td>
                </tr>
            </table> 
        </section>
        
    </body>
    <script src="script.js"></script>
</html>

Et le fichier JS situé dans le même répertoire :

var cells = document.getElementsByClassName('cells');

for(var cell of cells)
 {
   //console.log(cell);
     cell.addEventListener('click', function(event) {
    console.log(event.target.parentElement.getAttribute('lineNumber'));
   });
 }

Voilà, en gros la callback de l'eventListener reçoit automatiquement le paramètre event, grâce auquel tu peux accéder à l'event.target, à savoir l'élément qui a reçu l'évènement ( celui sur lequel on cliqué ).
De là je remonte à l'élément parent ( parentElement ), puis à la valeur de son attribut 'lineNumber'. Alors y'a probablement moyen de se passer de l'attribut lineNumber, en comptant le nombre d'éléments enfants de l'élément parents qu'il y a avant l'élément parent de l'élément qui a provoqué l'évènement, mais bon, tu vois bien qu'à définir ça fait un peu tortueux, donc perso j'ai pas envie de me lancer là dedans

Donc je sais pas si ton tableau est construit de manière dynamique ( genre pour chaque objet "client" récupéré depuis une requête vers la bdd, construire une nouvelle ligne de tableau, y insérer une case "nom du client", une case "mail du client", puis une case "choix du client" contenant ta select ) il suffit d'ajouter l'eventListener au passage, et le tour est joué.