Je voudrais sélectionner une ligne du tableau

Je voudrais sélectionner une ligne du tableau - PHP - Programmation

Marsh Posté le 27-04-2017 à 16:36:45    

Bonjour j'ai réaliser un code  sélection de ligne dans tableau mais le seul soucis c'est quand je coche le checkbox, la ligne ce met pas en surbrillance  
merci

Code :
  1. <?php
  2.     //PHP avant tout
  3.     if (!empty($_POST)) {
  4.         //la connexion
  5.         $connect = mysqli_connect("localhost", "root", "Mm101010", "smartphone" );
  6.        
  7.         //la requete de recherche
  8.         $query = "Select * from vu_affect_empl ";
  9.         if (!empty($_POST["query"])) {
  10.             $search = mysqli_real_escape_string($connect, $_POST["query"]);
  11.             $query .= "WHERE USER_ID LIKE '";
  12.             $query .= $search;
  13.             $query .= "%' OR  USER_ID LIKE '";
  14.             $query .= $search;
  15.             $query .= "%' OR  Num_SIM LIKE '";
  16.             $query .= $search;
  17.             $query .= "%' ORDER BY Nom asc";
  18.         } else {
  19.             $query .= "ORDER BY USER_ID";
  20.         }
  21.         //Lancement de la requete
  22.         $resultat = mysqli_query($connect, $query);
  23.     }
  25. ?>
  26. <!DOCTYPE html>
  27. <html>
  28. <head>
  29.   <meta charset="utf-8"/>
  30.   <style>
  31.     .selected > td {
  32.       background-color : pink;
  33.     }
  34.   </style>
  35.   <script type="text/javascript">
  36.       function changeValueOfCheckbox(check) {
  37.         var tr = document.getElementById(check.value);
  38.         var cssClass = tr.getAttribute('class');
  39.         if (cssClass === null) {
  40.           cssClass = '';
  41.         }
  42.         if (check.checked) {
  43.           // add class selected
  44.           cssClass += ' selected';
  45.         } else {
  46.           // suppression class selected
  47.           var sel = ' selected';
  48.           var i = cssClass.indexOf(sel);
  49.           if (i > -1) {
  50.             var tmp = cssClass.substring(0, i);
  51.             tmp += cssClass.substring(i + sel.length);
  52.             cssClass = tmp;
  53.           }
  54.         }
  55.         tr.setAttribute('class', cssClass);
  56.       }
  57.   </script>
  58. </head>
  59. <body>
  60. <?php
  61.   if(isset($resultat) && mysqli_num_rows($resultat) > 0) {
  62. ?>
  63.     <div class="table-responsive">
  64.         <table class="table table bordered">
  65.           <thead>
  66.             <tr>
  67.                 <th>&nbsp;</td>
  68.                 <th>USER ID</th>
  69.                 <th>Nom</th>
  70.                 <th>Prenom</th>
  71.                 <th>Num SIM</th>
  72.                 <th>PIN Terminal</th>
  73.                 <th>PIN SIM</th>
  74.                 <th>Num EMEI</th>
  75.                 <th>Date Debut</th>
  76.                 <th>Date Fin</th>
  77.                 <th>Vitre</th>
  78.                 <th>Coque</th>
  79.                 <th>Support Vehicule</th>
  80.                 <th>Actif</th>
  81.                 <th>Or Affectation1</th>
  82.                 <th>Statut</th>
  83.             </tr>
  84.           </thead>
  85.           <tbody>
  86. <?php
  87.             while($row = mysqli_fetch_array($resultat)) {
  88. ?>
  89.             <tr id="<?= $row["USER_ID"] ?>">
  90.                 <td><input type="checkbox" onchange="changeValueOfCheckbox(<?= $row["USER_ID"] ?> )"  name="Select[]" value="<?php echo $row['USER_ID'];?>" class="Selected"> </td>
  91.                 <td><?php echo $row["USER_ID"]; ?></td>
  92.                 <td><?php echo $row["Nom"]; ?></td>
  93.                 <td><?php echo $row["Prenom"]; ?></td>
  94.                 <td><?php echo $row["Num_SIM"]; ?></td>
  95.                 <td><?php echo $row["PIN_Terminal"]; ?></td>
  96.                 <td><?php echo $row["PIN_SIM"]; ?></td>
  97.                 <td><?php echo $row["Num_IMEI"]; ?></td>
  98.                 <td><?php echo $row["Date_Debut"]; ?></td>
  99.                 <td><?php echo $row["Date_Fin"]; ?></td>
  100.                 <td><?php echo $row["Vitre"]; ?></td>
  101.                 <td><?php echo $row["Coque"]; ?></td>
  102.                 <td><?php echo $row["Support_Vehicule"]; ?></td>
  103.                 <td><?php echo $row["Actif"]; ?></td>
  104.                 <td><?php echo $row["Or_Affectation1"]; ?></td>
  105.                 <td><?php echo $row["Statut"]; ?></td>
  106.             </tr>
  107. <?php
  108.            }
  109.            echo '</tbody></table>';
  110.          } else { echo 'Pas enregistrement pour le moment'; }
  111. ?>
  112. </body>
  113. </html>
  114. <?php
  115. mysqli_free_result($resultat);
  116. mysqli_close($connect);


merci


Message édité par vinkey le 27-04-2017 à 17:23:30
Reply

Marsh Posté le 27-04-2017 à 16:36:45   

Reply

Marsh Posté le 27-04-2017 à 18:25:02    

Pas certain d'avoir tout capté, en fait tu veux que ta fonction js fonctionne avec n'importe quelle classe CSS? (si ce n'est pas le cas alors tu fais un truc totalement à la mords moi le noeud)
 
Un truc du genre n'irait pas?
 

Code :
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <title>page test</title>
  5.         <meta charset="UTF-8">
  6.         <style type="text/css">
  7.             table {
  8.                 border-collapse: collapse;
  9.             }
  10.             td, th {
  11.                 border: 1px solid #000000;
  12.                 padding: 5px;
  13.                 text-align: center;
  14.             }
  15.             th {
  16.                 background-color: #0070FF;
  17.             }
  18.             tr.xxx > td {
  19.                 background-color: transparent;
  20.             }
  21.             tr.xxx-selected > td {
  22.                 background-color: #FFFF80;
  23.             }
  24.             tr.yyy > td {
  25.                 background-color: transparent;
  26.             }
  27.             tr.yyy-selected > td {
  28.                 background-color: #FFFF80;
  29.             }
  30.         </style>
  31.         <script type="text/javascript">
  32.             function switchStyleSelected(el, id) {
  33.                 var parentTh = document.getElementById(id);
  34.                 var nameClass = parentTh.getAttribute("class" );
  35.                 if(el.checked) {
  36.                     parentTh.setAttribute("class", nameClass + "-selected" );
  37.                 } else {
  38.                     parentTh.setAttribute("class", nameClass.replace("-selected", "" ));
  39.                 }
  40.             }
  41.         </script>
  42.     </head>
  43.     <body>
  44.         <div id="main_div">
  45.             <div id="div_table1">
  46.                 <p>Tableau 1:</p>
  47.                 <table id="table1">
  48.                     <thead>
  49.                         <tr>
  50.                             <th>id</th>
  51.                             <th>nom</th>
  52.                             <th>prénom</th>
  53.                             <th>info</th>
  54.                         </tr>
  55.                     </thead>
  56.                     <tbody>
  57.                         <tr id="tab1_tr_1" class="xxx">
  58.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_1');">1</td>
  59.                             <td>AAA</td>
  60.                             <td>Aaa</td>
  61.                             <td>aaa</td>
  62.                         </tr>
  63.                         <tr id="tab1_tr_2" class="xxx">
  64.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_2');">2</td>
  65.                             <td>BBB</td>
  66.                             <td>Bbb</td>
  67.                             <td>bbb</td>
  68.                         </tr>
  69.                         <tr id="tab1_tr_3" class="xxx">
  70.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_3');">3</td>
  71.                             <td>CCC</td>
  72.                             <td>Ccc</td>
  73.                             <td>ccc</td>
  74.                         </tr>
  75.                         <tr id="tab1_tr_4" class="xxx">
  76.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_4');">4</td>
  77.                             <td>DDD</td>
  78.                             <td>Ddd</td>
  79.                             <td>ddd</td>
  80.                         </tr>
  81.                         <tr id="tab1_tr_5" class="xxx">
  82.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_5');">5</td>
  83.                             <td>EEE</td>
  84.                             <td>Eee</td>
  85.                             <td>eee</td>
  86.                         </tr>
  87.                         <tr id="tab1_tr_6" class="xxx">
  88.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab1_tr_6');">6</td>
  89.                             <td>FFF</td>
  90.                             <td>Fff</td>
  91.                             <td>fff</td>
  92.                         </tr>
  93.                     </tbody>
  94.                 </table>
  95.             </div>
  96.             <div id="div_table2">
  97.                 <p>Tableau 2:</p>
  98.                 <table id="table2">
  99.                     <thead>
  100.                         <tr>
  101.                             <th>id</th>
  102.                             <th>nom</th>
  103.                             <th>prénom</th>
  104.                             <th>info</th>
  105.                         </tr>
  106.                     </thead>
  107.                     <tbody>
  108.                         <tr id="tab2_tr_1" class="yyy">
  109.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_1');">1</td>
  110.                             <td>AAA</td>
  111.                             <td>Aaa</td>
  112.                             <td>aaa</td>
  113.                         </tr>
  114.                         <tr id="tab2_tr_2" class="yyy">
  115.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_2');">2</td>
  116.                             <td>BBB</td>
  117.                             <td>Bbb</td>
  118.                             <td>bbb</td>
  119.                         </tr>
  120.                         <tr id="tab2_tr_3" class="yyy">
  121.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_3');">3</td>
  122.                             <td>CCC</td>
  123.                             <td>Ccc</td>
  124.                             <td>ccc</td>
  125.                         </tr>
  126.                         <tr id="tab2_tr_4" class="yyy">
  127.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_4');">4</td>
  128.                             <td>DDD</td>
  129.                             <td>Ddd</td>
  130.                             <td>ddd</td>
  131.                         </tr>
  132.                         <tr id="tab2_tr_5" class="yyy">
  133.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_5');">5</td>
  134.                             <td>EEE</td>
  135.                             <td>Eee</td>
  136.                             <td>eee</td>
  137.                         </tr>
  138.                         <tr id="tab2_tr_6" class="yyy">
  139.                             <td><input type="checkbox" onChange="switchStyleSelected(this, 'tab2_tr_6');">6</td>
  140.                             <td>FFF</td>
  141.                             <td>Fff</td>
  142.                             <td>fff</td>
  143.                         </tr>
  144.                     </tbody>
  145.                 </table>
  146.             </div>
  147.         </div>
  148.     </body>
  149. </html>


Message édité par MaybeEijOrNot le 28-04-2017 à 15:17:01

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 28-04-2017 à 14:05:59    

Sinon je viens de relire ce que tu avais écrit, et si ça ne fonctionne pas c’est pour plusieurs raisons.
Premièrement tu déclares dans la partie HTML appelé la fonction js comme suit :

Code :
  1. onchange="changeValueOfCheckbox(<?= $row["USER_ID"] ?> )"


Donc ta variable « check » est soit un nombre soit une chaîne de caractères contenant l’id de l’objet auquel tu souhaites changer la class css. Donc la ligne suivante doit retourner une erreur :

Code :
  1. var tr = document.getElementById(check.value);


Puisque « check » n’est pas un objet. Normalement tu n’as pas besoin du « .value » puisque ta variable « check » correspond déjà à l’id.

 


Deuxièmement, tu déclares que ta class css s’appelle comme suit dans ton css :

Code :
  1. .selected


Et dans ton js tu écris :

Code :
  1. cssClass += ' selected';


Ce qui ne correspond évidemment plus puisque dans ton js elle commence par un espace. De toute façon commencer le nom d’une class css par un espace est soit incorrecte soit à proscrire absolument.

 


Troisièmement dans ton js :

Code :
  1. var sel = ' selected';
  2.           var i = cssClass.indexOf(sel);
  3.           if (i > -1) {
  4.             var tmp = cssClass.substring(0, i);
  5.             tmp += cssClass.substring(i + sel.length);
  6.             cssClass = tmp;


La première ligne indique le motif recherché, ok.
La deuxième indique sa position dans la chaîne de caractères, ok.
La quatrième indique qu’on ne garde que la partie de la chaîne de caractères qui précède le motif (donc le nom de la class css non sélectionnée), ok.
La cinquième indique qu’à ce nom de class css non sélectionnée on ajoute le motif, pas ok, tu annules ce que tu viens de faire précédemment…

 


Mais encore une fois, à moins de vouloir gérer plusieurs noms de class avec cette même fonction js tu te casses la tête pour rien.


Message édité par MaybeEijOrNot le 28-04-2017 à 14:07:19

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed