11522 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Onclick sur un <tr> créé par un while en php

Bonjour,
voici mon soucis...qui pour beaucoup d'entre vous sera je pense facile, néanmoins, je galère pas mal après de multiples essais Smiley lol
En faite, j'ai un tableau dont le contenu est généré par une boucle while en PHP. J'aimerai qu'au clique sur une ligne, la ligne change de couleur, et que lorsqu'on clique sur une autre ligne, cela remet la couleur d'origine sur la première cliqué, et change celle de la seconde.

Voici mont bout de code PHP/HTML :

<?php
$i = 0;
while ($donnees_projets = $affiche_projets->fetch()){
?>
<tr id="ligne<?php echo $i; ?>" name="ligne" class="a" onclick="changeclr()">
<?php $i++; ?>

#les cellules de la ligne...

</tr>
<?php
} $affiche_projets->closeCursor(); ?>
<!-- Termine le traitement de la requête -->
</tbody>

et pour le JS :

function changeclr(){
var ligne = document.getElementByTagName('tr');
if(ligne.style.backgroundColor == "#FFFFFF"){
alert('ligne');
}
}


Merci pour votre aide ! Smiley biggrin
Modérateur
Salut,

A mon humble avis, pas besoin d'id ou de onclick dans ton html.
Coté Js c'est aussi brouillon. Tu as un onclick qui est appelé par chaque ligne mais dedans tu re-selectionne toute les lignes avec un getElementByTagName mais tu ne le parcours pas.

Bref je te propose ce code plutôt (il est pas parfait mais l'esprit est là je pense) :

<table>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
  <tr class="ligne"><td>coucou</td></tr>
</table>

.highlight {
  background: red;
}

 // on récupère toutes les lignes
let ligneAll = document.getElementsByClassName('ligne');

// on passe sur le tableau de toutes les lignes et on pose un eventListner sur chaque ligne qui va appeler la fonction au click
for (let ligne of ligneAll) {
  ligne.addEventListener("click", changeclr);
}

function changeclr(){
  // On récupère la ligne highlighted
  let ligneHihlighted = document.getElementsByClassName('highlight')[0];
  // ici j'ai fait le choix de mettre un [0] pour gagner du temps et ne pas repasser par une boucle alors que je sais qu'il n'y aura qu'une ligne highlighted au max, mais ca se discute c'est pas hyper propre
  // si il y en a une alors on lui enlève sa class highlight
  if (ligneHihlighted) {
  	ligneHihlighted.classList.remove("highlight");
  }
  // On rajoute une class highlight sur la ligne cliquée grace a this
  this.classList.add("highlight");
}

test : https://jsfiddle.net/undless/btgypa26/

Bonne journée

PS : Quand tu poses du code utilise les balises de mise en forme stp Smiley cligne
Modifié par _laurent (09 Apr 2020 - 16:00)
Bonjour, merci pour ton aide !
Oui en effet, c'est nouveau pour moi le JS, et va falloir que je m'y colle sérieusement !

C'est tout à fait ça, mais ça ne veut pas fonctionner... Smiley ohwell
Sachant que j'avais déjà une couleur une ligne sur deux, ce que j'ai essayé d'enlever pour voir si ça bloquait mais non...

Une petite idée? J'ai essayé aussi de mettre le JS dans le balise script dans ma page mais rien a faire, ça veut pas... Smiley ohwell

Merci !
Bonjour melER5
Essayes de mettre le test du DOM disponible (Vérifies aussi que le code HTML généré est correcte) :

document.addEventListener('DOMContentLoaded',function(){
 // on récupère toutes les lignes
let ligneAll = document.getElementsByClassName('ligne');

// on passe sur le tableau de toutes les lignes et on pose un eventListner sur chaque ligne qui va appeler la fonction au click
for (let ligne of ligneAll) {
  ligne.addEventListener("click", changeclr);
}
});


Ou "moins classe" :
onclick="changeclr(this)"


function changeclr(ligne){
ligne.style......
// ligne est la ligne cliquée
}

Modifié par aliasdmc (10 Apr 2020 - 09:04)
Bonjour aliasdmc, j'ai essayé les deux et cela ne fonctionne pas... Smiley ohwell

le code HTML à l'ai correct, les ligne sont générés par une boucle en PHP while
Bonjour melER5,

Il est possible d'avoir un codepen du code GENERE (+ Javascript + css) ou une url ?
Pour que l'on puisse tester
Modifié par aliasdmc (10 Apr 2020 - 16:25)
Bonjour melER5,

let ligneAll = document.getElementsByClassName('ligne');

et non
let ligneAll = document.getElementsByTagName('ligne');


Pour la CSS :
tr.highlight{
  background-color: red;
}

Tu avais un problème de Poids des sélecteurs Css

Exemple qui fonctionne :
https://codepen.io/Zonecss/pen/JjYoXMV

Ne recherche que sur les tr du tbody
let ligneHihlighted = this.parentNode.getElementsByClassName('highlight')[0];

Modifié par aliasdmc (10 Apr 2020 - 17:41)
Meilleure solution
Nikel merci ! Smiley lol

maintenant faut que j'arrive par la suite a récupéré une valeur dans une cellule pour afficher un contenu en relation avec celle-ci.
Encore des choses à apprendre ! Smiley lol Heureusement d'ailleurs !

Merci à vous !
Modifié par melER5 (10 Apr 2020 - 17:47)
Bonjour melER5,

Dans le codepend, j'ai modifié changeCouleur pour récupérer le td cliqué et je t'ajoutes des liens qui pourrons t'aider
Sujet clos
Aller à