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

vinkey33 83 Messages postés mercredi 9 décembre 2015Date d'inscription 29 janvier 2018 Dernière intervention - 18 nov. 2016 à 12:59 - Dernière réponse : @karamel 1654 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 février 2018 Dernière intervention
- 24 nov. 2016 à 18:57
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 !
Afficher la suite 

14 réponses

Répondre au sujet
jordane45 20553 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 18 nov. 2016 à 14:15
0
Utile
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.
Commenter la réponse de jordane45
vinkey33 83 Messages postés mercredi 9 décembre 2015Date d'inscription 29 janvier 2018 Dernière intervention - Modifié par vinkey33 le 18/11/2016 à 14:26
0
Utile
3
une derniere chose comment tu les idendifie les td au input avec "tr_<?php echo $i;?>" ?
jordane45 20553 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 18 nov. 2016 à 15:17
?
Je n'ai pas compris ta question.

A savoir que la boucle que j'ai créé .. c'est pour l'exemple....
vinkey33 83 Messages postés mercredi 9 décembre 2015Date d'inscription 29 janvier 2018 Dernière intervention - 18 nov. 2016 à 15:22
comment tu fait pour dire que les cellules de tel colonne vont toujours dans le même input?
jordane45 20553 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention > vinkey33 83 Messages postés mercredi 9 décembre 2015Date d'inscription 29 janvier 2018 Dernière intervention - 18 nov. 2016 à 15:36
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......
Commenter la réponse de vinkey33
@karamel 1654 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 février 2018 Dernière intervention - Modifié par @karamel le 18/11/2016 à 17:59
0
Utile
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 !
Commenter la réponse de @karamel
cs_jperre 268 Messages postés lundi 9 janvier 2006Date d'inscription 19 janvier 2017 Dernière intervention - Modifié par @karamel le 24/11/2016 à 15:56
0
Utile
1
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.
jordane45 20553 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 24 nov. 2016 à 15:37
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.
Commenter la réponse de cs_jperre
vinkey33 83 Messages postés mercredi 9 décembre 2015Date d'inscription 29 janvier 2018 Dernière intervention - 24 nov. 2016 à 16:28
0
Utile
1
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
jordane45 20553 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 avril 2018 Dernière intervention - 24 nov. 2016 à 18:13
Attention !!!!
Tu mélanges plusieurs technos .....
D'un côté tu as du PDO ... et en plein milieu tu me balances du mysli !
Commenter la réponse de vinkey33
@karamel 1654 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 février 2018 Dernière intervention - Modifié par @karamel le 24/11/2016 à 17:11
0
Utile
1
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 !
vinkey33 83 Messages postés mercredi 9 décembre 2015Date d'inscription 29 janvier 2018 Dernière intervention - 24 nov. 2016 à 17:25
la commande js je la met avant ou a la suite?
Commenter la réponse de @karamel
@karamel 1654 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 février 2018 Dernière intervention - 24 nov. 2016 à 18:42
0
Utile
1
on la met soit dans l'entete du document soit dans la page elle sera lu au chargement de la page
@karamel 1654 Messages postés vendredi 9 mai 2008Date d'inscriptionModérateurStatut 23 février 2018 Dernière intervention - 24 nov. 2016 à 18:57
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>
Commenter la réponse de @karamel

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.