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>