Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2526 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  Je voudrais sélectionner une ligne du tableau

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Je voudrais sélectionner une ligne du tableau

n°2299938
vinkey
Posté le 27-04-2017 à 16:36:45  profilanswer
 

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.     }
  24. ?>
  25. <!DOCTYPE html>
  26. <html>
  27. <head>
  28.   <meta charset="utf-8"/>
  29.   <style>
  30.     .selected > td {
  31.       background-color : pink;
  32.     }
  33.   </style>
  34.   <script type="text/javascript">
  35.       function changeValueOfCheckbox(check) {
  36.         var tr = document.getElementById(check.value);
  37.         var cssClass = tr.getAttribute('class');
  38.         if (cssClass === null) {
  39.           cssClass = '';
  40.         }
  41.         if (check.checked) {
  42.           // add class selected
  43.           cssClass += ' selected';
  44.         } else {
  45.           // suppression class selected
  46.           var sel = ' selected';
  47.           var i = cssClass.indexOf(sel);
  48.           if (i > -1) {
  49.             var tmp = cssClass.substring(0, i);
  50.             tmp += cssClass.substring(i + sel.length);
  51.             cssClass = tmp;
  52.           }
  53.         }
  54.         tr.setAttribute('class', cssClass);
  55.       }
  56.   </script>
  57. </head>
  58. <body>
  59. <?php
  60.   if(isset($resultat) && mysqli_num_rows($resultat) > 0) {
  61. ?>
  62.     <div class="table-responsive">
  63.         <table class="table table bordered">
  64.           <thead>
  65.             <tr>
  66.                 <th>&nbsp;</td>
  67.                 <th>USER ID</th>
  68.                 <th>Nom</th>
  69.                 <th>Prenom</th>
  70.                 <th>Num SIM</th>
  71.                 <th>PIN Terminal</th>
  72.                 <th>PIN SIM</th>
  73.                 <th>Num EMEI</th>
  74.                 <th>Date Debut</th>
  75.                 <th>Date Fin</th>
  76.                 <th>Vitre</th>
  77.                 <th>Coque</th>
  78.                 <th>Support Vehicule</th>
  79.                 <th>Actif</th>
  80.                 <th>Or Affectation1</th>
  81.                 <th>Statut</th>
  82.             </tr>
  83.           </thead>
  84.           <tbody>
  85. <?php
  86.             while($row = mysqli_fetch_array($resultat)) {
  87. ?>
  88.             <tr id="<?= $row["USER_ID"] ?>">
  89.                 <td><input type="checkbox" onchange="changeValueOfCheckbox(<?= $row["USER_ID"] ?> )"  name="Select[]" value="<?php echo $row['USER_ID'];?>" class="Selected"> </td>
  90.                 <td><?php echo $row["USER_ID"]; ?></td>
  91.                 <td><?php echo $row["Nom"]; ?></td>
  92.                 <td><?php echo $row["Prenom"]; ?></td>
  93.                 <td><?php echo $row["Num_SIM"]; ?></td>
  94.                 <td><?php echo $row["PIN_Terminal"]; ?></td>
  95.                 <td><?php echo $row["PIN_SIM"]; ?></td>
  96.                 <td><?php echo $row["Num_IMEI"]; ?></td>
  97.                 <td><?php echo $row["Date_Debut"]; ?></td>
  98.                 <td><?php echo $row["Date_Fin"]; ?></td>
  99.                 <td><?php echo $row["Vitre"]; ?></td>
  100.                 <td><?php echo $row["Coque"]; ?></td>
  101.                 <td><?php echo $row["Support_Vehicule"]; ?></td>
  102.                 <td><?php echo $row["Actif"]; ?></td>
  103.                 <td><?php echo $row["Or_Affectation1"]; ?></td>
  104.                 <td><?php echo $row["Statut"]; ?></td>
  105.             </tr>
  106. <?php
  107.            }
  108.            echo '</tbody></table>';
  109.          } else { echo 'Pas enregistrement pour le moment'; }
  110. ?>
  111. </body>
  112. </html>
  113. <?php
  114. mysqli_free_result($resultat);
  115. mysqli_close($connect);


merci


Message édité par vinkey le 27-04-2017 à 17:23:30
mood
Publicité
Posté le 27-04-2017 à 16:36:45  profilanswer
 

n°2299953
MaybeEijOr​Not
but someone at least
Posté le 27-04-2017 à 18:25:02  profilanswer
 

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.
n°2299970
MaybeEijOr​Not
but someone at least
Posté le 28-04-2017 à 14:05:59  profilanswer
 

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.

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  Je voudrais sélectionner une ligne du tableau

 

Sujets relatifs
Modification structure table, quid des vues ?!?supprimer le premier ligne d'un fichier
selection ligne tableau pour requêteExecuter une ligne de commande windows en java
Id absolu et Id relatif dans la même table MySQLtable conversion en assembleur
Sélectionner en automatique les lignes d'un résultat d'un filtresupprimer retour à la ligne
supprimer plusieurs retours à la lignelancer un programme python en ligne de commande sous windows
Plus de sujets relatifs à : Je voudrais sélectionner une ligne du tableau


Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR