Selection ligne d'un tableau PHP/HTML [Résolu]

Signaler
Messages postés
97
Date d'inscription
mercredi 9 décembre 2015
Statut
Membre
Dernière intervention
23 janvier 2021
-
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
2 avril 2021
-
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 (voir descriptif photo) .Donc déjà es ce possible ? Si oui en PHP ? En JavaScript ? Autre ?
j' comencé en php voici le code que j'ai réalisez mais le soucis c'est qu'il me prend juust une cellule alors moi je veudrais tout la ligne réparti sur plusieur input

  <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>
<tr onclick="document.getElementById('id_input').value = '1';">
<th>1</th>
<th>Operateur</th>
<th>SIM</th>
<th>PUK</th>
<th>Num ligne</th>
<th>Volume</th>
<th>Statut abo</th>
</tr>


merci et désolée si je poste pas au bonne endroit !

7 réponses

Messages postés
32194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 avril 2021
346
Bonjour,

=> Javascript
et ...Visiblement tu as déjà commencé ou du moins essayé :
 <tr onclick="document.getElementById('id_input').value = '1';">


Il faut donc, dans un script javascript, boucler sur toutes les cellules (les éléments TD) de la ligne (TR) sur laquelle tu as cliqué.
Pour l'identifier, le mieux serait d'ajouter un ID à tes TR.

Par exemple :
    <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
         } //fin de la boucle de création des lignes
        ?>
      </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];
    // ici tu en fais ce que tu veux.
    // par exemple : affichage dans la console du navigateur
    console.log("Cellule N° "+c + " = " + cell.innerHTML);
  }
 }
</script>


PS : La question concernant le Javascript je déplace ta question dans le bon forum.
Messages postés
97
Date d'inscription
mercredi 9 décembre 2015
Statut
Membre
Dernière intervention
23 janvier 2021

une derniere chose comment tu les idendifie les td au input avec "tr_<?php echo $i;?>" ?
Messages postés
32194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 avril 2021
346
?
Je n'ai pas compris ta question.

A savoir que la boucle que j'ai créé .. c'est pour l'exemple....
Messages postés
97
Date d'inscription
mercredi 9 décembre 2015
Statut
Membre
Dernière intervention
23 janvier 2021

comment tu fait pour dire que les cellules de tel colonne vont toujours dans le même input?
Messages postés
32194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 avril 2021
346 >
Messages postés
97
Date d'inscription
mercredi 9 décembre 2015
Statut
Membre
Dernière intervention
23 janvier 2021

Ben tu sais dans quel ordre elles se trouvent non ?
Dans ce cas cas il est facile d'assorcier l'input voulu....

la variable "c" allant de 0 jusqu'à la dernière colonne.
Si tu essayes mon code (et que tu regardes dans la console de ton navigateur ) tu devrais comprendre plus facilement......
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
2 avril 2021
126
bonjour

en modifiant un peut le script coté js ca donne ceci

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style type="text/css">

body{
 background-color:gray; 
}

td{
 cursor:pointer;
 padding:10px;
}

tr:hover{
  background-color:#80BFFF
}

table{
width:200px;
 margin:auto;
 background-color:blue
}

</style>

<script type="text/javascript">

function getTrValues(e){


 var el=e.target.parentNode
 
 if(el.cells && el.parentNode.rows[0]!=el){
  var all=document.getElementById('div_ctn').getElementsByTagName("input")
  var cells =  el.cells
  var cellcount = cells.length;
  for( c=0; c<cellcount; c++) {
   all[c].value=cells[c].innerHTML
  }
 }
}
</script>

</head>
<body>


<table onclick="getTrValues(event)">
<tr>
     <th>Operateur</th><th>SIM</th><th>PUK</th><th>Num ligne</th>
<tr><td>orange</td><td>1578656452</td><td>44445546866</td><td>0607080901</td></tr>
<tr><td>free</td><td>1578685452</td><td>4446456866</td><td>0608080808</td></tr>
<tr><td>bouygue</td><td>156889452</td><td>44465476866</td><td>0677777777</td></tr>

</table>

<div id='div_ctn'>
operateur<input type="texte"></input>
num Sim<input type="texte"></input>
<br>
Puk<input type="texte"></input>
Numero ligne<input type="texte"></input>

</div>

</body>
</html>


rien ne sert de courir il faut partir a point.
cours Forest cours !
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Statut
Membre
Dernière intervention
19 janvier 2017
2
Pour récupérer toutes les cellules d'une ligne de tableau, il faut utiliser la collection cells de l'objet DOM Tr (table row).

Une fonction de sélection des cellules pourrait s'écrire:

<script>
function selCells(idRow) {
  // Affectation de la ligne du tableau à une variable x
  var x = document.getElementById(idRow);
  // Recherche du nombre de cellules de la ligne
  var nbCells = x.cells.length;
  // Création d'un tableau pour collecter les valeurs des cellules
  var arCells = [];
 // Recherche des contenus des cellules du tableau HTML
  var i;
  for (i = 0; i < nbCells; i++) {
       arCells[i] = x.cells[i].innerHTML;
       }
  //Affectation des valeurs du tableau aux champs du formulaire
  var Ch1 = document.getElementById("champ1);
  Ch1.value = arCells[0];
  var Ch2 = document.getElementById("champ2);  
  Ch2.value = arCells[1];
  ...
  ...  
}
</script>


Ce script est à placer dans la section <head> de la page PHP.

Dans le code HTML, sur chaque ligne du tableau
<tr id="idRow" onclick="selCells(this.id)">
... Cellules du tableau (<td> ou <th>)
</tr>


Je pense que cela devrait résoudre votre problème.
Messages postés
32194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 avril 2021
346
Déjà répondu : http://codes-sources.commentcamarche.net/forum/affich-10071014-selection-ligne-d-un-tableau-php-html#1

NB: Pas besoin de mettre le script dans le HEAD


NB² : Merci d'utiliser les balises de code (la coloration syntaxique) lorsque tu postes du code sur le forum.
Messages postés
97
Date d'inscription
mercredi 9 décembre 2015
Statut
Membre
Dernière intervention
23 janvier 2021

merci de vos réponse mais je n'arrive toujours pas a sélectionné une ligne voici les codes
php html:
<?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 id="idRow" onclick="selCells(this.id)">
<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>
<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 . ' ' . $Num_SIM . ' ' . $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:
 function selCells(idRow) {
var x = document.getElementById(idRow);
var nbCells = x.cells.length;
var arCells = [];
var i;
for (i = 0; i < nbCells; i++) {
arCells[i] = x.cells[i].innerHTML;
}
var Ch1 = document.getElementById("Operateur);
Ch1.value = arCells[0];
var Ch2 = document.getElementById("Num_SIM);
Ch2.value = arCells[1];
var Ch3 = document.getElementById("PUK);
Ch3.value = arCells[2];
var Ch4 = document.getElementById("Num_ligne);
Ch4.value = arCells[3];
var Ch5 = document.getElementById("Volume);
Ch5.value = arCells[4];
var Ch6 = document.getElementById("Statut_abo);
Ch6.value = arCells[5];
}

merci
Messages postés
32194
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
27 avril 2021
346
Attention !!!!
Tu mélanges plusieurs technos .....
D'un côté tu as du PDO ... et en plein milieu tu me balances du mysli !
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
2 avril 2021
126
bonjour
met ce bout de code

addEventListener('load', function(){

 document.querySelector(".Tableau").onclick=function(e){

  var el=e.target.parentNode
  
  if(el.cells && el.parentNode.rows[0]!=el){
   var all=document.getElementById('saisie').getElementsByTagName("input")
   var cells =  el.cells
   var cellcount = cells.length;
   for( c=0; c<cellcount; c++) {
    all[c].value=cells[c].innerHTML
   }
  }
 }
}, false);


et aussi retire le div qui englobe le tableau c'est une erreur conserve juste l'id qui sera celui du tableau contenant les inputs comme ceci

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

  </table>



rien ne sert de courir il faut partir a point.
cours Forest cours !
Messages postés
97
Date d'inscription
mercredi 9 décembre 2015
Statut
Membre
Dernière intervention
23 janvier 2021

la commande js je la met avant ou a la suite?
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
2 avril 2021
126
on la met soit dans l'entete du document soit dans la page elle sera lu au chargement de la page
Messages postés
1783
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
2 avril 2021
126
teste et regarde cette exemple

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<style type="text/css">

body{
 background-color:gray; 
}

.Tableau td{
 cursor:pointer;
 padding:10px;
}

.Tableau tr:hover{
  background-color:#80BFFF
}

.Tableau{
width:200px;
 margin:auto;
 background-color:blue
}

</style>

<script>

addEventListener('load', function(){

document.querySelector(".Tableau").onclick=function(e){

 var el=e.target.parentNode
  
 if(el.cells && el.parentNode.rows[0]!=el){
  var all=document.getElementById('saisie').getElementsByTagName("input")
  var cells =  el.cells
  var cellcount = cells.length;
  for( c=0; c<cellcount; c++) {
   all[c].value=cells[c].innerHTML
  }
 }
 }
}, false);

</script>

</head>
<body>


<table class="Tableau">
<tr>
     <th>Operateur</th><th>SIM</th><th>PUK</th><th>Num ligne</th>
<tr><td>orange</td><td>1578656452</td><td>44445546866</td><td>0607080901</td></tr>
<tr><td>free</td><td>1578685452</td><td>4446456866</td><td>0608080808</td></tr>
<tr><td>bouygue</td><td>156889452</td><td>44465476866</td><td>0677777777</td></tr>

</table>

<br>

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

  </table>

</body>
</html>