Sélectionner une ligne de tableau [Débutant(e)]

**vinkey_33** · 16/11/2016, 08h34

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
Nom : t-3.png
Affichages : 2326
Taille : 60,6 Ko

Nom : t-3.png
Affichages : 2326
Taille : 60,6 Ko

Merci en espérant que c'est compréhensible
Cordialement,

**NoSmoking** · 17/11/2016, 19h14

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.

**vinkey_33** · 18/11/2016, 15h13

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 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
  <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

**ABCIWEB** · 18/11/2016, 15h37

Salut,

De quels inputs tu parles ? Tu veux faire quoi exactement, envoyer un formulaire ?

**NoSmoking** · 19/11/2016, 10h14

@vinkey_33 :
Merci de rester dans la même discussion pour une meilleur compréhension de tous.

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.

**vinkey_33** · 23/11/2016, 14h59

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 :

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
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,

**andry.aime** · 24/11/2016, 05h57

Bonjour,

Envoyé par vinkey_33

Code php :

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

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 php :

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

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+.

**vinkey_33** · 24/11/2016, 15h21

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 :

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
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 :

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

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

**Watilin** · 24/11/2016, 19h57

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 html :

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

<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 html :

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

<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>

à bannir. Centre tes éléments avec CSS.

4.

Code PHP :

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
        <?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 php :

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
  <?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 html :

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

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 php :

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

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

Code JS :

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

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 php :

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

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

Code JS :

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

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 html :

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

<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 :

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

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 JS :

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

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;
  …
}