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

Messages postés
87
Date d'inscription
mercredi 9 décembre 2015
Dernière intervention
30 juillet 2018
-
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 

Votre réponse

7 réponses

Messages postés
23569
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 décembre 2018
0
Merci
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
Messages postés
87
Date d'inscription
mercredi 9 décembre 2015
Dernière intervention
30 juillet 2018
0
Merci
une derniere chose comment tu les idendifie les td au input avec "tr_<?php echo $i;?>" ?
jordane45
Messages postés
23569
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 décembre 2018
-
?
Je n'ai pas compris ta question.

A savoir que la boucle que j'ai créé .. c'est pour l'exemple....
vinkey33
Messages postés
87
Date d'inscription
mercredi 9 décembre 2015
Dernière intervention
30 juillet 2018
-
comment tu fait pour dire que les cellules de tel colonne vont toujours dans le même input?
jordane45
Messages postés
23569
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 décembre 2018
> vinkey33
Messages postés
87
Date d'inscription
mercredi 9 décembre 2015
Dernière intervention
30 juillet 2018
-
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
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
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
Messages postés
268
Date d'inscription
lundi 9 janvier 2006
Dernière intervention
19 janvier 2017
0
Merci
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
Messages postés
23569
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 décembre 2018
-
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
Messages postés
87
Date d'inscription
mercredi 9 décembre 2015
Dernière intervention
30 juillet 2018
0
Merci
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
Messages postés
23569
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
10 décembre 2018
-
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
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
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
Messages postés
87
Date d'inscription
mercredi 9 décembre 2015
Dernière intervention
30 juillet 2018
-
la commande js je la met avant ou a la suite?
Commenter la réponse de @karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
0
Merci
on la met soit dans l'entete du document soit dans la page elle sera lu au chargement de la page
@karamel
Messages postés
1663
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
3 novembre 2018
-
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.