Add onclick event on a php-generated table cells

starting in javascript, I come to you so that when I select a line from my table, I want the cells under the table to fill PS: fields and seasons of a database (phpmyadmin) Here is an image that illustrates that I would like to realize as well as the code in php

<?php require_once "PDO_connect.php";

$query="SELECT * FROM smartphone.vu_affect_empl";
try{
  $prep = $bdd->prepare($query);
  $prep->execute();
  $resultats = $prep->fetchAll();
  
}catch(Exception $e){;
  echo "Erreur ! ".$e->getMessage() ;
}

?>
<!DOCTYPE>
<html>
 <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>Affectation</title>
 <link rel="stylesheet" type="text/css" href="Bouton.css">
 <link rel="stylesheet" type="text/css" href="TableauxAffect.css">

 </head>
 <style>
   .selline { background-color: silver;}
 </style>
 <body>
 <center><h1>Affectation</h1></center>
  <center>
    <a class="Abonnements" href="http://localhost/formulaire/Form_PHP/php_presque_fini/Abonnements.php" rel="nofollow noopener noreferrer" target="_blank">Abonnement</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="fixed_headers">
   <thead>
<th>USER ID</th>
<th>Nom</th>
<th>Prenom</th>
<th>Num SIM</th>
<th>PIN Terminal</th>
<th>PIN SIM</th>
<th>Num EMEI</th>
<th>Date Debut</th>
<th>Date Fin</th>
<th>Vitre</th>
<th>Coque</th>
<th>Support Vehicule</th>
<th>Actif</th>
<th>Or Affectation1</th>
<th>Statut</th>
    </thead>
   <tbody>
   <?php
   echo "<br>";
   if(!empty($resultats)){
   foreach  ($resultats as $row) {
     echo "<tr>";
      echo "<td>".$row["USER_ID"]."</td>";
      echo "<td>".$row["Nom"]."</td>";
      echo "<td>".$row["Prenom"]."</td>";
      echo "<td>".$row["Num_SIM"]."</td>";
      echo "<td>".$row["PIN_Terminal"]."</td>";
      echo "<td>".$row["PIN_SIM"]."</td>";
      echo "<td>".$row["Num_IMEI"]."</td>";
      echo "<td>".$row["Date_Debut"]."</td>";
      echo "<td>".$row["Date_Fin"]."</td>";
      echo "<td>".$row["Vitre"]."</td>";
      echo "<td>".$row["Coque"]."</td>";
      echo "<td>".$row["Support_Vehicule"]."</td>";
      echo "<td>".$row["Actif"]."</td>";
      echo "<td>".$row["Or_Affectation1"]."</td>";
      echo "<td>".$row["Statut"]."</td>";
      echo "</tr>";
   }
     }else {
   echo "Pas d'enregistrements dans cette table...";
   }
      ?></tbody></table>
<script type="text/javascript" src="/http://localhost/formulaire/Form_PHP/php_presque_fini/Liste_droulante.js"></script>
  </center>
  <br><br>

  <center><?php
error_reporting(E_ALL);
$sql = "SELECT * FROM employe";
$datas = NULL;

try{
  $query = $bdd -> prepare($sql);
  $query -> execute($datas);
  $rows = $query->fetchAll();
} catch(PDOException $e) {
   echo ('Erreur : ' . $e->getMessage());
}

?>
<select name="employes">
  <option value="">Choisi un nom </option>
  <?php
  if(!empty($rows)){
   //Si la liste n'est pas vide on boucle dessus
   foreach ($rows as $employe){
     echo "<option value='".$employe['Or_Affectation']."'>".$employe[Nom]."</option>";
   }
   }
 ?>
 </select> </center>
  <center>
  <table>
  <tr>
      <td>Or Affectation :<input id"_1" type="text" name="Operateur" value=""> </div></td>
   <td></td>
   <td>
        USER ID :<input id"_2" type="text" name="Num_SIM" value=""></div>
      </td>
     </tr>
     <tr>
      <td>PIN Terminal : <input id"_3" type="text" name="PUK" value=""></div></td>
   <td></td>
   <td>
       PIN SIM :<input id"_4" type="text" name="Num_ligne" value=""></div>
      </td>
     </tr>
     <tr>
      <td>
       Vitre :<input id"_5" type="text" name="Volume" value=""></div>
      </td>
    <td></td>
    <td>
       Support Vehicule :<input id"_6" type="text" name="Statut_Abo" value=""></div>
      </td>
     </tr>
  <tr>
      <td>Num SIM :<input id"_7" type="text" name="Operateur" value=""> </div></td>
   <td></td>
   <td>
        Date Debut :<input id"_8" type="text" name="Num_SIM" value=""></div>
      </td>
     </tr>
     <tr>
      <td>Date Fin : <input id"_9" type="text" name="PUK" value=""></div></td>
   <td></td>
   <td>
       Actif :<input id"_10" type="text" name="Num_ligne" value=""></div>
      </td>
     </tr>
     <tr>
      <td>
       Statut Affectation :<input id"_11" type="text" name="Volume" value=""></div>
      </td>
    <td></td>
    <td>
       Or Affectation1 :<input id"_12" type="text" name="Statut_Abo" value=""></div>
      </td>
     </tr>
       <tr>
      <td>Statut :<input id"_13" type="text" name="Operateur" value=""> </div></td>
   <td></td>
  </table>
<button class="Menu" type="button">Sumprimer Affectation</button>
<button class="Menu" type="button">Confirmer Retour Equipement</button>
<button class="Menu" type="button">Remplacer Equipement</button> 
<button class="Menu" type="button">Ajout et Supression Ligne</button> 
<button class="Menu" type="button">Confirmer Retour Abonnement</button> 
<button class="Menu" type="button">Reaffectation Equipement</button>
 </center>
 </body>
</html> 

you have to add a marker to each cell that later tells JavaScript which input field this value belongs to. the remainder is setting an event on each row (or whatever element should receive the event) whose handler reads the data of the row and its relations to the form and appropriately sets the form data.

also note that your id attributes in the input fields are missing the = sign making it useless.

You can give me an example with my code please
thank you

untested, but you should get the idea.

<!-- HTML -->
<tr>
  <td data-name="operator">Orange</td>
</tr>
<!-- elsewhere -->
<input type="text" name="operator">
// JS
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);

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.