Coloriser une ligne d'un tableau

**Phpx1** · 16/04/2020, 15h43

Bonjour,

J'affiche un 1er tableau (en HTML) qui liste des livres (Titre, année) infos récupérées depuis la BBD puis un second tableau (tjrs sur la même page) qui affiche les chapitres, et d'autres données.... pour chaque livre sélectionne ds le 1er tableau.

(Le principe c'est donc de cliquer sur une ligne du 1er Tableau (Livres) et d'avoir la ligne colorée en rouge mais retire la couleur de la ligne sélectionnée précédemment (Vous voyez un peu le principe...;-)) un peu comme Excel, je crois (J'espère que j'ai été suffisamment clair ds mes explications ??)

J'ai fouillé pas sur le net et j'ai trouvé un truc qui me paraissait pas mal avec les méthodes removeClass et addClass mais malheureusement, ça ne fonctionne pas
.
PRECISIONS sur mon code:
------------------------------

La fonction (lineClicked) sur le onClick est bien appelée dans mon code (vérifié avec un console.log) mais ensuite il ne se passe rien (c'est le calme absolu....;-)) et pas d'erreur particulière c'est comme si ces méthodes étaient ignorées...)

Rem:
Dans mon code, lors de l'appel de la page, j'ai codé pour que la 1ère ligne du tableau (LIV) soit en rouge (voir ds la boucle un peu codé bourin à la va vite mais c'était pas trop le but...)
mais ça ne fonctionne ;-(( (Pourtant lorsque je visualise le html généré; j'ai bien la classe 'lignecoloree" sur la 1ére ligne et 'lignenormale' sur les autres mais la 1ère n'est pas colorée.)

Je vous ai joint la partie (CSS) , (la partie JS) et la partie (chargement du tableau).
Merci d'avance pour vos conseils si vous avez déjà eu ce type de traitement à faire....

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
        .lignecoloree {
          background-color:red;
          }
 
        .lignenormale {
          background-color:white;
          }

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
       <script type="text/javascript">
 
/////     -------------------------------------------------------
/////   APPEL FONCTION lineClicked ( Affichage Tableau CHAP)
/////     -------------------------------------------------------
 
         $(document).ready(function(){
 
         function lineClicked(){
 
 
              $('tr').removeClass('lignecoloree');  //Enleve la classe sur les autres lignes
              $(this).addClass('lignecoloree');     // Rajoute la classe sur la ligne cliquee
 
         //    var numliv = $(this).find('#NumLiv').html();  // Récupére la valeur de la cellule
 
        //    numliv = $("#NumLiv").val();
 
              $.ajax({
                      type:"POST",
                      url:"listchap.php",
                      data: {num: numliv},
                      datatype: "json",
 
 
                      success:function(data){

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
  <body> 
 
      <form  method="post" action="">   
         <table class="scrolldown"> 
 
 
<!--  =======================================================   -->
<!--  =    Affichage  ENTETE  Tableau                           -->
<!--  =======================================================   -->
 
           <thead>  
             <tr>
                 <th>Numero</th>
                 <th class="coltitre" >Titre</th>
                 <th>Annee</th>
                 <th>Supp</th>
                 <th>Modif</th> 
            </tr>
            </thead>   
 
 
          <tbody>
 
<?php
 
          // BOUCLE SUR LECTURE DU CURSOR
          //   ------------------------
 
 
           $nbr=0;
           while ($donnees = $reponse->fetch())
           {
                    
 
      //   SURLIGNER la 1ere LIGNE du TAB EN ROUGE (lignecoloree) 
      //         (les autres lignes (lignenormale) )
          
 
            $nbr++;
            if ($nbr == 1)
               {
                  $numlivre = $donnees['Num'];
                  $classe = 'lignecoloree'; 
                  
             else
                  $classe = 'lignenormale';
                   $a = 1;
               }
 
          
          
           // DONNEES A AFFICHER DS LIGNE DU 1ER TABLEAU 
          //    ----------------------
?>
 
          <tr class="<?php echo $classe; ?>"  onClick="lineClicked();" >   
 
              <td id="NumLiv" ><?php echo $donnees['Num'];   ?></td>
              <td> class="coltitre" ><div class="debord"><?php echo $donnees['Titre']; ?></div></td>
              <td><?php echo $donnees['Annee']; ?></td>  
              <td><input type="checkbox" name="suppcheck[]" value="<?php echo $donnees['Num']; ?>" /></td>
              <td><input type="radio" name="modifradio[]"   value="<?php echo $donnees['Num']; ?>" /></td>
 
          </tr>
<?php
           //    var_dump($donnees['Titre']);
           //    var_dump($donnees['Annee']); 
              //  var_dump($donnees['Num']);
                             
                            
               
           }
 
           //    var_dump($donnees['Titre']);
           //    var_dump($donnees['Annee']);
                         
$reponse->closeCursor();
 
?>
          </tbody>   
 
 
       </table>
 
      </form>
</body>

**Toufik83** · 17/04/2020, 20h27

Salut,

Déjà les <tr> sont insérés dynamiquement, donc il faut leur attacher l'événement "click" par délégation et surtout supprimer aussi l'attribut onClick des <tr>:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
//la fonction lineClicked déclarée en dehors du context $(document).ready
function lineClicked(){
   //supprimer les deux classes de tous les <tr>
   $('.scrolldown tr').removeClass('lignecoloree lignenormale');
   //ajouter la class lignecoloree au <tr> cliqué
   $(this).addClass('lignecoloree'); 
}
 
$(document).ready(function(){
    //Attacher le click au <tr> par délégation : 
    $('.scrolldown').on('click','tr',lineClicked );
});

Attention aussi aux doublons des id (un id doit être unique):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<td id="NumLiv" >

devrait être remplacé par :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<td id="NumLiv<?=$nbr?>" >
//Ou bien
<td id="NumLiv<?php echo $nbr;?>" >

**Phpx1** · 18/04/2020, 11h39

Bonjour Toufik83,

Merci de ta réponse.
Effectivement, je comprends un peu mieux le principe maintenant du chargement dynamique ! (concernant les onclick).
Par contre, je ne m'explique pas que la 1ère ligne ne soit pas colorisée à l'affichage de la page (pourtant je le définis bien la classe ds ma boucle) ou fait-il charger ds la 1ere ligne du <tr> style="background-color:red" ???

**Toufik83** · 18/04/2020, 12h34

Salut,

C'est parce que ton bloc if else est mal écrit, correction :

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
if ($nbr == 1){
        $numlivre = $donnees['Num'];
        $classe = 'lignecoloree'; 
}//fermeture de if manquante !
 
else{//ouverture de else manquante !
        $classe = 'lignenormale';
        $a = 1;
}

Normalement php t'affichera une erreur du genre :syntax error, unexpected 'else' (T_ELSE) non ?

**Phpx1** · 18/04/2020, 13h17

En fait, effectivement c'était une erreur que j'avais déjà corrigé mais j'ai dû me tromper de version lorsque je l'ai mis en ligne...:-((
Car une fois cette erreur corrigé , lorsque je visualisais le html généré, j'avais bien ds la classe= 'lignecoloree' pour la 1ère ligne et "lignenormale" pour les autres.

**Toufik83** · 18/04/2020, 17h51

En ligne sur le forum ou bien sur un autre serveur ?
Si tu as hébergé ton site en ligne, donne moi le lien pour voir ce qui se passe....

**Phpx1** · 21/04/2020, 14h07

Bonjour,
Ça fonctionne !
J'ai juste rajouté un tbody après le scrolldown lors de l'appel de la fonction , car quand le cliquais sur l'entête , la ligne se colorisait aussi....;-))
Encore merci.

Coloriser une ligne d'un tableau

jQuery

Vue hybride

Discussions similaires

Partager

Partager