Sélectionner une ligne de tableau

Version imprimable

16/11/2016, 08h34
vinkey_33

1 pièce(s) jointe(s)

Sélectionner une ligne de tableau

Bonjour, étant débutant en javascript, je viens vers vous pour que quand je sélectionne une ligne de mon tableau, je voudrai que les cellules se trouvant sous le tableau se remplissent
ps: les champs ainsi que les saisie vienne d'une base de donnée (phpmyadmin)
voici une image qui illustre que j'aimerais réaliser
Pièce jointe 224940
Merci en espérant que c'est compréhensible
Cordialement,
17/11/2016, 19h14
NoSmoking

Bonjour,
pour le principe, une fois la ligne cliquée, tu récupères les données contenu dans les cellules, <td>, puis tu les copies dans les champs correspondants.

Pour récupérer la ligne il te faut mettre un écouteur sur les lignes, <tr>, de ton tableau.

Il me semble que l'on a eu une discussion similaire il y a peu.

Selection sur ligne de tableau généré par php

Bonjour,
Alors je remplis un tableau HTML grâce à du PHP, je voudrais pouvoir sélectionner une ligne entière, c'est à dire récupérer une ligne du tableau pour les inséré dans des input correspondant aux nom de colonne
je commencé voici le code que j'ai réalisez mais le soucis sur la fin de mon code pour les identifié aux inputs

Code:

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
  <table class="Tableau">
     <thead>
        <tr>
         <th>Operateur</th>
         <th>SIM</th>
         <th>PUK</th>
         <th>Num ligne</th>
         <th>Volume</th>
         <th>Statut abo</th>
        <tr>    
       </thead>
       <tbody>
        <?php
         for($i=1;$i<10;$i++){
        ?>
         <tr id="tr_<?php echo $i;?>" onclick="getTrValues(this.id)">
           <td><?php echo $i;?></td>
           <td>Operateur_<?php echo $i;?></td>
           <td>SIM_<?php echo $i;?></td>
           <td>PUK_<?php echo $i;?></td>
           <td>Num ligne _<?php echo $i;?></td>
           <td>Volume _<?php echo $i;?></td>
           <td>Statut abo _<?php echo $i;?></td>
          </tr>
        <?php
         }
        ?>
      </tbody>
    </table>
 </body>
</html>
<script type="text/javascript">
 function getTrValues(idTr){
  var tr = document.getElementById(idTr);
  var cells =  tr.cells
  var cellcount = cells.length;
  for( c=0; c<cellcount; c++) {
    cell = cells[c];
  }
 }
</script>

Merci
Cordialement

18/11/2016, 15h37
ABCIWEB

Salut,

De quels inputs tu parles ? Tu veux faire quoi exactement, envoyer un formulaire ?
19/11/2016, 10h14
NoSmoking

http://www.developpez.com/template/kit/kitwarning.png @vinkey_33 :
Merci de rester dans la même discussion pour une meilleur compréhension de tous.

Citation:

Envoyé par NoSmoking

Il me semble que l'on a eu une discussion similaire il y a peu.

une toute petite recherche t'aurait amené à :
Cliquer sur une ligne de tableau créé depuis une base de données pour remplir un formulaire.

bonjour après de nombreuse tentative j'obtiens a la ligne 60 une erreur " Parse error: syntax error, unexpected 'Operateur' (T_STRING), attendant ',' ou ';' dans C: \ wamp64 \ www \ Formulaire \ Form_PHP \ php_presque_fini \ Abonnements.php sur la ligne 60" je ne vois pas quoi corrigé
code

Code:

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<?php require_once "PDO_connect.php";
 
$query="SELECT * FROM smartphone.abonnements";
try{
  $prep = $bdd->prepare($query);
  $prep->execute();
  $resultats = $prep->fetchAll();
  
}catch(Exception $e){;
  echo "Erreur ! ".$e->getMessage() ;
}
$host = "localhost";
$user = "root";
$pass = "Mm101010";
$dbn = "smartphone";
      $link = mysqli_connect($host, $user, $pass, $dbn);
?>
<!DOCTYPE>
<html>
 <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Abonnement</title>
 <link rel="stylesheet" type="text/css" href="Bouton.css">
 <link rel="stylesheet" type="text/css" href="TableauxAbonn.css">
 
 </head>
 <style>
   .selline { background-color: silver;}
 </style>
 <body>
 <center><h1>Abonnements</h1></center>
  <center>
    <a class="Affectation" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Affectation.php" rel="nofollow noopener noreferrer" target="_blank">Affectation</a>
    <a class="Equipement" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Equipement.php" rel="nofollow noopener noreferrer" target="_blank">Equipement</a>
    <a class="Reaffectation_Equipement" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Reaffectation_Equipement.php" rel="nofollow noopener noreferrer" target="_blank">Reaffectation Equipement</a>
    <a class="Nouvelle_Affectation" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Nouvelle_Affectation.php" rel="nofollow noopener noreferrer" target="_blank">Nouvelle Affectation</a>
    <a class="Employe" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Employe.php" rel="nofollow noopener noreferrer" target="_blank">Employe</a>
    <a class="Modele" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Modele.php" rel="nofollow noopener noreferrer" target="_blank">Modele</a>
  </center>
  <br><br><br>
 <center>
  <table class="Tableau">
   <thead>
   <tr onclick="fctClick(this)">
     <th>Operateur</th>
     <th>SIM</th>
     <th>PUK</th>
     <th>Num ligne</th>
     <th>Volume</th>
     <th>Statut abo</th>
   </tr>    
   </thead><tbody>
   <div id="main"
   <?php
   echo "<br>";
   if(!empty($resultats)){
   foreach  ($resultats as $row) {
 
     echo "<tr>";
      echo "<td data-name="Operateur">".$row["Operateur"]."</td>";
      echo "<td data-name="Num_SIM">".$row["Num_SIM"]."</td>";
      echo "<td data-name="PUK">".$row["PUK"]."</td>";
      echo "<td data-name="Num_ligne">".$row["Num_ligne"]."</td>";
      echo "<td data-name="Volume">".$row["Volume"]."</td>";
      echo "<td data-name="Statut_abo">".$row["Statut_abo"]."</td>";
      echo "</tr>";
   }
     }else {
   echo "Pas d'enregistrements dans cette table...";
   }
      ?>
      </tbody></table></center>
  <br><br>
 
  <center>
  <?php
    $query = "SELECT USER_ID, Nom, Num_SIM, Num_ligne FROM select_nom_prenom_user ORDER BY Nom, Num_SIM, Num_ligne ASC";
    if($result = mysqli_query($link, $query));
    {
        echo'<select name="select_nom_prenom_user">';
        echo'<option value="" selected="selected" disabled="disabled">Selectionnée Nom/Num SIM/Num ligne</option>';
        while ($idresult = mysqli_fetch_row($result))
        {
            $USER_ID = $idresult[0];
            $Nom = $idresult[1];
            $Num_SIM = $idresult[2];
            $Num_ligne = $idresult[3];
 
            echo'<option value="' . $USER_ID . '">' . $Nom . '&nbsp;' . $Num_SIM . '&nbsp;' . $Num_ligne . '</option>';
        }
        echo'</select></p><p>';  
    }
    ?>
 </select><table>
  <tr>
      <td>Operateur :<input id="_1" type="text" name="Operateur" value=""> </div></td>
   <td></td>
   <td>
        Num SIM :<input id="_2" type="text" name="Num_SIM" value=""></div>
      </td>
     </tr>
     <tr>
      <td>PUK : <input id="_3" type="text" name="PUK" value=""></div></td>
   <td></td>
   <td>
       Num ligne :<input id="_4" type="text" name="Num_ligne" value=""></div>
      </td>
     </tr>
     <tr>
      <td>
       Volume :<input id="_5" type="text" name="Volume" value=""></div>
      </td>
    <td></td>
    <td>
       Statut Abo :<input id="_6" type="text" name="Statut_abo" value=""></div>
      </td>
     </tr>
  </table>
 </center>
 </div>
 <script function readFormData(evt)
{
  let children = this.getElementsByTagName('TD');
  [].forEach.call(children, function (cell) {
    document.getElementsByName(cell.dataset.name)[0].value = cell.textContent;
  });
}
// tr being a <tr> element in a loop
tr.addEventListener('click', readFormData);
</script>
 </body>
</html>

merci,

Bonjour,

Citation:

Envoyé par vinkey_33

Code:

1
2
3
4
5
6
7
 
      echo "<td data-name="Operateur">".$row["Operateur"]."</td>";
      echo "<td data-name="Num_SIM">".$row["Num_SIM"]."</td>";
      echo "<td data-name="PUK">".$row["PUK"]."</td>";
      echo "<td data-name="Num_ligne">".$row["Num_ligne"]."</td>";
      echo "<td data-name="Volume">".$row["Volume"]."</td>";
      echo "<td data-name="Statut_abo">".$row["Statut_abo"]."</td>";

Code:

1
2
3
echo "<td data-name=\"Operateur\">".$row["Operateur"]."</td>";
// ou bien
echo "<td data-name='Operateur'>".$row["Operateur"]."</td>";

De même pour les autres lignes.

A+.

merci pour t'es conseille mais ton procèdé ne fonctionne pas donc j'ai essayé de faire autrement, j'arrive a a faire apparaitre le tableau en php avec toute ces information mais je n'arrive pas a selectionné une ligne pouvez vous m'aidez je craque, voici les cod html, php et le ce code js:

Code:

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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<?php require_once "PDO_connect.php";
 
$query="SELECT * FROM smartphone.abonnements";
try{
  $prep = $bdd->prepare($query);
  $prep->execute();
  $resultats = $prep->fetchAll();
 
}catch(Exception $e){;
  echo "Erreur ! ".$e->getMessage() ;
}
$host = "localhost";
$user = "root";
$pass = "Mm101010";
$dbn = "smartphone";
      $link = mysqli_connect($host, $user, $pass, $dbn);
?>
<!DOCTYPE>
<html>
 <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Abonnement</title>
 <link rel="stylesheet" type="text/css" href="Bouton.css">
 <link rel="stylesheet" type="text/css" href="TableauxAbonn.css">
 <link rel="stylesheet" type="javacrispt" href="select.js">
 
 </head>
 <style>
   .selline { background-color: silver;}
 </style>
 <body>
 <center><h1>Abonnements</h1></center>
  <center>
    <a class="Affectation" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Affectation.php" rel="nofollow noopener noreferrer" target="_blank">Affectation</a>
    <a class="Equipement" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Equipement.php" rel="nofollow noopener noreferrer" target="_blank">Equipement</a>
    <a class="Reaffectation_Equipement" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Reaffectation_Equipement.php" rel="nofollow noopener noreferrer" target="_blank">Reaffectation Equipement</a>
    <a class="Nouvelle_Affectation" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Nouvelle_Affectation.php" rel="nofollow noopener noreferrer" target="_blank">Nouvelle Affectation</a>
    <a class="Employe" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Employe.php" rel="nofollow noopener noreferrer" target="_blank">Employe</a>
    <a class="Modele" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Modele.php" rel="nofollow noopener noreferrer" target="_blank">Modele</a>
  </center>
  <br><br><br>
 <center>
    <table class="Tableau">
     <thead>
        <tr>
         <th>Operateur</th>
         <th>SIM</th>
         <th>PUK</th>
         <th>Num ligne</th>
         <th>Volume</th>
         <th>Statut abo</th>
        <tr>    
       </thead>
       <tbody>
        <?php
         for($i=1;$i<10;$i++){
           if(!empty($resultats)){
   foreach  ($resultats as $row) {
        ?>
         <tr id="tr_<?php echo $i;?>" onclick="getTrValues(this.id)">
           <td id="_1"><?php echo $row["Operateur"];?></td>
           <td><?php echo $row["Num_SIM"];?></td>
           <td><?php echo $row["PUK"];?></td>
           <td><?php echo $row["Num_ligne"];?></td>
           <td><?php echo $row["Volume"];?></td>
           <td><?php echo $row["Statut_abo"]?></td>
          </tr>
        <?php
         }
       }
     }
        ?>
 </tbody></table></center>
  <br><br>
 
  <center>
  <?php
    $query = "SELECT USER_ID, Nom, Num_SIM, Num_ligne FROM select_nom_prenom_user ORDER BY Nom, Num_SIM, Num_ligne ASC";
    if($result = mysqli_query($link, $query));
    {
        echo'<select name="select_nom_prenom_user">';
        echo'<option value="" selected="selected" disabled="disabled">Selectionnée Nom/Num SIM/Num ligne</option>';
        while ($idresult = mysqli_fetch_row($result))
        {
            $USER_ID = $idresult[0];
            $Nom = $idresult[1];
            $Num_SIM = $idresult[2];
            $Num_ligne = $idresult[3];
 
            echo'<option value="' . $USER_ID . '">' . $Nom . '&nbsp;' . $Num_SIM . '&nbsp;' . $Num_ligne . '</option>';
        }
        echo'</select></p><p>';  
    }
    ?>
 </select><table><div id="saisie">
  <tr>
      <td>Operateur :<input id="_1" type="text" name="Operateur" value=""> </div></td>
   <td></td>
   <td>
        Num SIM :<input id="_2" type="text" name="Num_SIM" value=""></div>
      </td>
     </tr>
     <tr>
      <td>PUK : <input id="_3" type="text" name="PUK" value=""></div></td>
   <td></td>
   <td>
       Num ligne :<input id="_4" type="text" name="Num_ligne" value=""></div>
      </td>
     </tr>
     <tr>
      <td>
       Volume :<input id="_5" type="text" name="Volume" value=""></div>
      </td>
    <td></td>
    <td>
       Statut Abo :<input id="_6" type="text" name="Statut_abo" value=""></div>
      </td>
     </tr>
     </div>
  </table>
 </center>
 </body>
</html>

js:

Code:

1
2
3
4
5
6
7
8
 function getTrValues(idTr){
  var tr = document.getElementById(idTr);
  var cells =  tr.cells
  var cellcount = cells.length;
  for( c=0; c<cellcount; c++) {
    cell = cells[c];
}
 }

merci de ton attention

Il y a tout un tas de trucs qui ne vont pas dans ton code.

1. Tu mélanges PDO et mysqli. Choisis-en un, n’utilise pas les deux à la fois.

2. Tu as voulu faire quoi ici ?

Code:

<link rel="stylesheet" type="javacrispt" href="select.js">

On dirait une inclusion mélangée de fichier JS et CSS. Si tu veux inlure un script externe, la syntaxe est :

Code:

<script type="text/javascript" src="select.js"></script>

Avec le doctype html 5, l’attribut type est optionnel. Ton doctype est incomplet, au passage.

3. La balise <center> :arrow: à bannir. Centre tes éléments avec CSS.

4.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <?php for($i=1;$i<10;$i++){ if(!empty($resultats)){ foreach ($resultats as $row) { ?> <tr id="tr_<?php echo $i;?>" onclick="getTrValues(this.id)"> <td id="_1"><?php echo $row["Operateur"];?></td> <td><?php echo $row["Num_SIM"];?></td> <td><?php echo $row["PUK"];?></td> <td><?php echo $row["Num_ligne"];?></td> <td><?php echo $row["Volume"];?></td> <td><?php echo $row["Statut_abo"]?></td> </tr> <?php } } } ?>
Trop de balises php, c’est fouillis (en plus c’est mal indenté), ça rend le code difficile à lire et ça peut dissimuler des erreurs. Utilise un seul echo et des variables de chaîne :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <?php for ($i = 1; $i < 10; $i++) { if (!empty($resultats)) { foreach ($resultats as $row) { echo "<tr id='tr_$i' onclick='getTrValues(this.id)'> <td id='_1'>{$row['Operateur']}</td> <td>{$row['Num_SIM' ]}</td> <td>{$row['PUK' ]}</td> <td>{$row['Num_ligne' ]}</td> <td>{$row['Volume' ]}</td> <td>{$row['Statut_abo']}</td> </tr>"; } } } ?>
5. D’ailleurs, cette boucle for qui compte jusqu’à 10, elle sert à quoi ? Serait-ce un test temporaire que tu as oublié de supprimer ?

6. On ne met pas de div directement dans une table. Éventuellement on peut en mettre dans les cellules, mais je crois que dans ton cas il vaut mieux mettre la table dans la div :
Code:

1 2 3 4 5 <div id="saisie"> <table> … </table> </div>
Maintenant, à propos de ton JavaScript. Le onclick sur les <tr> est un bon départ, mais pas besoin de passer par l’id, tu peux passer directement this en paramètre.
Code:

1 2 3 echo "<tr id='tr_$i' onclick='getTrValues(this)'> …";
Code:

1 2 3 function getTrValues(tr) { … }
À présent il faut que tu lies à la main les données que tu extrairas de tes <td>, pour les insérer dans tes champs. Ma meilleure suggestion est de rajouter des classes sur les cellules pour les sélectionner facilement, par exemple :
Code:

1 2 3 4 echo "… <td class='cell_Num_SIM'>{$row['Num_SIM' ]}</td> …";
Code:

1 2 3 4 function getTrValues(tr) { var cell_Num_SIM = tr.querySelector('.cell_Num_SIM'); … }
Et pour finir, je te conseille fortement de donner des id explicites à tes champs.

Code:

<input id="field_Num_SIM" type="text" name="Num_SIM" value="">

Ces id, tu récupères des références dessus en dehors de ta fonction, pour éviter d’avoir à appeler getElementById à chaque fois :
Code:

1 2 3 4 5 6 var field_Num_SIM = document.getElementById('field_Num_SIM'); … function getTrValues(tr) { … }
Il ne te reste plus qu’à remplir les champs avec les valeurs de la ligne :
Code:

1 2 3 4 5 6 7 8 9 function getTrValues(tr) { var cell_Num_SIM = tr.querySelector('.cell_Num_SIM'); var cell_… = tr.querySelector( … ); … field_Num_SIM.value = cell_Num_SIM.textContent; field_… .value = cell_… .textContent; … }
Voilà, je te laisse compléter les trous ;)

26/11/2016, 15h47
NoSmoking

Pas sûr que tu ais été voir le lien fourni !

Citation:

Envoyé par NoSmoking

une toute petite recherche t'aurait amené à :
Cliquer sur une ligne de tableau créé depuis une base de données pour remplir un formulaire.

Cela n'enlève rien aux conseils/remarques prodigués par Watilin.