Sujet Précédent Sujet Suivant

Selection ligne d'un tableau PHP/HTML

Résolu
vinkey33 Messages postés 92 Date d'inscription mercredi 9 décembre 2015 Statut Membre Dernière intervention 23 janvier 2021 - Modifié par vinkey33 le 18/11/2016 à 13:00
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 - 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 !
A voir également:

7 réponses

Réponse 1 / 7
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
18 nov. 2016 à 14:15
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.
0
Réponse 2 / 7
vinkey33 Messages postés 92 Date d'inscription mercredi 9 décembre 2015 Statut Membre Dernière intervention 23 janvier 2021
Modifié par vinkey33 le 18/11/2016 à 14:26
une derniere chose comment tu les idendifie les td au input avec "tr_<?php echo $i;?>" ?
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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....
0
vinkey33 Messages postés 92 Date d'inscription mercredi 9 décembre 2015 Statut Membre Dernière intervention 23 janvier 2021
18 nov. 2016 à 15:22
comment tu fait pour dire que les cellules de tel colonne vont toujours dans le même input?
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344 > vinkey33 Messages postés 92 Date d'inscription mercredi 9 décembre 2015 Statut Membre Dernière intervention 23 janvier 2021
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......
0
Réponse 3 / 7
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
Modifié par @karamel le 18/11/2016 à 17:59
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 !
0
Réponse 4 / 7
cs_jperre Messages postés 268 Date d'inscription lundi 9 janvier 2006 Statut Membre Dernière intervention 19 janvier 2017 2
Modifié par @karamel le 24/11/2016 à 15:56
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.
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
vinkey33 Messages postés 92 Date d'inscription mercredi 9 décembre 2015 Statut Membre Dernière intervention 23 janvier 2021
24 nov. 2016 à 16:28
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
0
jordane45 Messages postés 38138 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 17 avril 2024 344
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 !
0
Réponse 6 / 7
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
Modifié par @karamel le 24/11/2016 à 17:11
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 !
0
vinkey33 Messages postés 92 Date d'inscription mercredi 9 décembre 2015 Statut Membre Dernière intervention 23 janvier 2021
24 nov. 2016 à 17:25
la commande js je la met avant ou a la suite?
0
Réponse 7 / 7
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
24 nov. 2016 à 18:42
on la met soit dans l'entete du document soit dans la page elle sera lu au chargement de la page
0
@karamel Messages postés 1854 Date d'inscription vendredi 9 mai 2008 Statut Modérateur Dernière intervention 8 avril 2024 153
Modifié par @karamel le 24/11/2016 à 19:53
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>
0

Discussions similaires

qu'est ce que le span en html?
cs_chris81 -
aurelien0306 -

1 réponse
Turbo C++
cs_jrod -
cmarsc -

1 réponse
tableau de nombre décimal vers tableau de nomber binaire
mkhadi -
mkhadi -

2 réponses
Etablir toutes les combinaisons possibles du Lotto
KBNchapal -
Mikaels35 -

6 réponses
TURBO C++ et blocks que choisir
norman bates -
Vale Erian -

1 réponse
Rejoignez-nous