Partage

Récupération de données sur un tableau dynamique

Sujet résolu

6 octobre 2021 à 13:46:42

Bonjour la communauté,

Comme l'indique le titre, je suis à la recherche d'une fonction Javascript qui me permettrait de récupérer les données de chaque <td> présents sur une ligne <tr> d'un tableau dynamique (rempli avec MySQL), et ce avec un clic sur la ligne concernée.

Je galère (je suis débutant)...

J'ai bien trouvé ce lien: https://openclassrooms.com/forum/sujet/selection-de-ligne-dun-tableau-dynamique qui mène à ce lien: https://codepen.io/Zonecss/pen/XqPRrL où on peut trouver exactement ce que je veux mais im-po-ssible pour moi de le faire fonctionner...

Les fonctions présentées dans ces pages sont-elles toujours d'actualité? Y aurait-il un autre moyen d'obtenir ce que je veux?

Mon code: (merci pour votre indulgence, je le répète: je suis novice depuis 1 mois environ...)

<?php 
/*----------------------------------paramètres de démarrage----------------------------------------*/
// On démarre la session AVANT d'écrire du code HTML
session_start();

 // Vérifiez si l'utilisateur est connecté, sinon redirigez-le vers la page de connexion
  if(!isset($_SESSION["teamname"])){
    header("Location: form1.php");
    exit(); 
  }

// Connexion à la base de données MySQL 
$bdd = new PDO('mysql:host=localhost;dbname=produits_chimiques;charset=utf8', 'root', '');

 
// Vérifier la connexion
if($bdd === false){
    die("ERREUR : Impossible de se connecter. " . mysqli_connect_error());
}
/*------------------------------------------------------------------------------------------------*/
?>

<!DOCTYPE html>
<html>
    <head >    	
        <meta charset="utf-8" />
        <link rel="stylesheet" href="style_form2.css" />
    </head>

<body>
<!-- on inclut jQuery via CDN -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>


<div class="tableau">
<!-------------partie tableau---------->
		<table id="mytable">
				
			<thead>
			     <tr>
						<th class="Name">Molecule Name</th>
						<th class="CAS">CAS Number</th>
						<th class="Formula">Formula</th>
						<th class="MW">MW</th>
						<th class="Quantity">Quantity</th>
						<th class="Location">Location</th>
						<th class="Purity">Purity/Concentration</th>
						<th class="Supplier">Supplier</th>
						<th class="Date">Creation Date</th>
						<th class="User">Current User</th>
				</tr>	
			</thead>
				
<?php
$reponse = $bdd->query('SELECT * FROM inventaire_actuel'); 
while ($donnees = $reponse->fetch()) 
   { 
 ?>  	
   	
		   	 <tr>
		          <td><?php echo $donnees['name']; ?></td>
		          <td><?php echo $donnees['CAS']; ?></td>
		          <td><?php echo $donnees['formula']; ?></td>
		          <td><?php echo $donnees['MW']; ?></td>
		          <td><?php echo $donnees['quantity']; ?></td>
		          <td><?php echo $donnees['room']; ?></td>
		          <td><?php echo $donnees['purity']; ?></td>
		          <td><?php echo $donnees['supplier']; ?></td>
		          <td><?php echo $donnees['creation_date']; ?></td>
		          <td><?php echo $donnees['user']; ?></td>
		      </tr>
     
<?php
               
	}
?>
		</table>

	</div>
	

</body>
</html>


<script type="text/javascript">
/*
Toutes le fonctions ci-dessous peuvent être optimisées
elles sont même volontairement non optimisées
Elles sont là juste pour vous présenter le concept à vous de les améliorer 
*/
/**
  * Selectionne la ligne et parcours ses cellules
  * @param Event oEvent
  */
function getCelluleLigne(oEvent){ 
  var sMg= "", 
      /* je récupère l'objtet TR*/
      oTr = oEvent.currentTarget, 
      /* je récupère les cellules du TD */
      oTds = oTr.cells,
      iNbTds = oTr.cells.length ;
  for(var i = 0 ;i < iNbTds; i++){
    sMg +=oTds[i].innerText+"\n";
  }//for
  //selecteLigne(oTr);
  alert(sMg); 
}//fct

/**
  * Selectionne la ligne via un click sur une des cellules
  * @param Event oEvent
  */
function selectedLigne(oEvent){ 
  var sClass ="selectedLigne",
      oTr = oEvent.currentTarget;
  // voir classList.toggle
  if(oTr.classList.contains(sClass)){
    oTr.classList.remove(sClass);
  }else{
    oTr.classList.add(sClass);
  }//else
}//fct

/**
  * Initialise/ Supprime  la selection par ligne
  * @param Boolean bAdd
  */
function initLigne(bAdd){
  var aTr = document.querySelectorAll("table tr"), iNb = aTr.length;
  oConfig.bUseLigne = bAdd;
  for(var i = 0; i < iNb; i++){
    aTr[i].removeAttribute("class");
    if(oConfig.bUseLigne == true){  
      aTr[i].addEventListener(
        'click', selecteLigne
      );
    }else{ 
      aTr[i].removeEventListener(
        'click', selecteLigne
      );
    }//else
  }//for
}//fct


</script>

       








<?php
$reponse->closeCursor();
?>

-
Edité par BGr45 6 octobre 2021 à 14:06:50

monkey3d

6 octobre 2021 à 16:22:24

Bonjour,

En regardant le code fourni, le problème est assez simple : certes tu déclares des fonctions javascript mais tu ne les appelles jamais donc elles ne s'exécutent jamais.

Je n'ai pas trop le temps de regarder les liens mais je suppose qu'il y a une autre partie de code javascript où les appels de fonction sont réalisées style :

initLigne(true ou false);

A+

-
Edité par monkey3d 7 octobre 2021 à 6:55:42

BGr45

7 octobre 2021 à 8:55:42

Merci @monckey3d,

c'était effectivement mon problème! J'ai donc rajouté une partie de code que j'ai modifié à ma sauce:

/*écoute de la page et des clics sur le tableau*/	
document.addEventListener('DOMContentLoaded',function(){
  var aTr = document.querySelectorAll("#mytable tr"), iNbTitle = aTr.length;
  for(var i = 0; i < iNbTitle; i++){
    aTr[i].addEventListener(
      'click', getCelluleLigne /*utilisation de la fonction lecture ligne*/
     );
    aTr[i].addEventListener(
      'click', selecteLigne /*utilisation de la fonction surlignement de l aligne sélectionnée*/
     );
  }//for
});

/**
  * Selectionne la ligne et retourne son index
  * @param Event oEvent
  */
function getCelluleLigne(oEvent){ 
  var sMg= "", 
      /* je récupère l'objet TR*/
      oTr = oEvent.currentTarget, 
      /* je récupère les cellules du TD */
      oTds = oTr.cells,
      iNbTds = oTr.cells.length ;
      sMg +=oTds[10].innerText+"\n";
      
  //for
  //selecteLigne(oTr);
  alert(sMg); 
}
/**
  * Surligne la ligne sélectionnée et supprime le surlignage précédent
  * @param Event oEvent
  */
function selecteLigne(oEvent){ 
  var sClass ="selectedLigne",
      oTr = oEvent.currentTarget;
  var aTr = document.querySelectorAll("#mytable tr"), iNbTitle = aTr.length;
  // voir classList.toggle
  for(var i = 0 ;i < iNbTitle; i++){
    aTr[i].classList.remove(sClass);
    oTr.classList.add(sClass);
  }//else
}//fct

Ca marche correctement mais je bute sur un autre problème maintenant...

Ma fonction getCelluleLigne me retourne la ligne sur laquelle j'ai cliqué (youpiii!) mais je ne comprends pas trop comment utiliser cette donnée javascript dans un code php pour mettre à jour des informations sur un <div>

Ca parait simple comme utilisation sur une page web mais ça ne l'est vraiment pas pour le coder!

Un début d'idée pour m'aider, siouplait?

-
Edité par BGr45 7 octobre 2021 à 8:57:40

LucasWerquin

7 octobre 2021 à 9:32:16

Javascript : côté client
php : côté serveur

Donc pour utiliser une donnée javascript dans du php, il va falloir faire une requête. Et si tu veux simplement mettre à jour le contenu d'une div et pas toute la page, ajax, c'est bien.

BGr45

7 octobre 2021 à 10:54:13

Merci LucasWerquin,

J'avais un peu peur de cette réponse... AJAX pour moi c'est de la science fiction!

J'ai pas trop compris le principe mais je vais me documenter un peu sur le sujet.

monkey3d

7 octobre 2021 à 14:26:03

Tu as plein de cours sur le net ... https://www.pierre-giraud.com/javascript-apprendre-coder-cours/introduction-ajax/

Le principe est assez simple quand on a bien compris l'architecture web :

- côté client navigateur émission d'un requête ajax en javascript avec des paramètres

- le serveur reçoit la requête et va traiter la demande en php avec les paramètres fournis

- le serveur retourne sous une forme en général en json le résultat au navigateur

- la fonction côté navigateur (donc javascript) reçoit le résultat et traite pour l'affichage.

Je te conseille d'oublier la surcouche jquery qui est souvent proposée pour ce genre de process et ne faire qu'en pur javascript.

Enfin, ce type de fonctionnement doit être maîtrisé car il est très souvent utilisé sur un site web.

A+

BGr45

7 octobre 2021 à 15:16:24

Merci pour ces informations!

J'ai maintenant un peu pigé et j'ai créé une nouvelle page requete.php

où j'ai ce code:

<?php 
/*----------------------------------paramètres de démarrage----------------------------------------*/
// Connexion à la base de données MySQL 
$bdd = new PDO('mysql:host=localhost;dbname=produits_chimiques;charset=utf8', 'root', '');

 
// Vérifier la connexion
if($bdd === false){
    die("ERREUR : Impossible de se connecter. " . mysqli_connect_error());
}
/*------------------------------------------------------------------------------------------------*/
?>

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

<body>

<?php

if(isset($_GET['IdLigne']) && !empty($_GET['IdLigne'])){

$reponse = $bdd->query("SELECT * FROM inventaire_actuel WHERE id='IdLigne' "); 
$donnees = $reponse->fetch() 
   
 ?>  	
 	  
		   	 
<div class="nav1" id="nav1">
		<br/>
		<br/>
		<br/>
		<br/>
		CAS Number: <?php echo $donnees['CAS']; ?><br/>
		<br/>
		Molecule Name: <?php echo $donnees['name']; ?> <br/>
		<br/>
		Alternate Name: <?php echo $donnees['alternate']; ?> <br/>
		<br/>
		Formula: <?php echo $donnees['formula']; ?> <br/>
		<br/>
		MW: <?php echo $donnees['MW']; ?> <br/>
		<br/>
		Physical State: <?php echo $donnees['state']; ?> <br/>
		<br/>
		Grade: <?php echo $donnees['grade']; ?> <br/>
		<br/>
		Purity/Concentration: <?php echo $donnees['purity']; ?> <br/>
		<br/>
</div>
</body>
</html>
<?php 
}
?>

et j'ai ajouté le code ajax qui tourne "presque" bien:

function getCelluleLigne(oEvent){ 
  var IdLigne= "", 
      /* je récupère l'objet TR*/
      oTr = oEvent.currentTarget, 
      /* je récupère les cellules du TD */
      oTds = oTr.cells,
      iNbTds = oTr.cells.length ;
      IdLigne +=oTds[10].innerText+"\n"; /*IdLigne représente le numéro de l'index de la ligne sélectionnée*/
      
  
  	//alert(IdLigne);
  	
	 document.getElementById('nav1').innerHTML = ""; //on supprime le contenu actuel de nav1
	 document.getElementById('nav2').innerHTML = ""; //on supprime le contenu actuel de nav2

		$.ajax({
		     url : 'requete.php',
		     type : 'GET',
		     data: IdLigne,
		     dataType : 'html',
		     success : function(reponse, statut){
		         $(reponse).appendTo('#nav1'); 
		     },
		     error : function(resultat, statut, erreur){
		       alert('erreurJS');
		     },
		     complete : function(resultat, statut){
		     }
		  });

Ca tourne "presque" bien parce que je vois bien que mon code ne comprend pas ma variable IdLigne...

Il suffit juste que je la remplace une valeur numérique, et j'ai bien ma div qui affiche ce qu'il faut...

$reponse = $bdd->query("SELECT * FROM inventaire_actuel WHERE id='3' ");

Je ne sais pas si l'erreur vient de mon code php ou du script... help! J'y suis presque!

-
Edité par BGr45 7 octobre 2021 à 15:18:38

piero5673

7 octobre 2021 à 18:54:39

Bonjour,

Dans ta variable IdLigne, tu rajoute des "\n". Comme c'est une string, ce qu'il y a dans data doit être sous la forme d'url encodée (ex : IdLigne=1&unAutreParam=2). Je ne vois pas trop l'intérêt de faire un += sans boucle, un = suffit.

-
Edité par piero5673 7 octobre 2021 à 18:57:00

BGr45

8 octobre 2021 à 10:49:19

Merci piero5673 pour cette info, j'ai modifié mon code et supprimé les choses en trop.

Mais ça n'a pas changé mon problème malheureusement

J'ai quand même fini par trouver mes erreurs.

Dans mon code ajax:

//utilisation d'ajax pour actualiser les informations dans nav1 et nav2
		$.ajax({
		     url : 'requete1.php',
		     type : 'GET',
		     data: {IdLigne:IdLigne},
		     dataType : 'html',
		     
		     success : function(reponse, statut){
		         $(reponse).appendTo('#nav1'); 
		     },
		     error : function(resultat, statut, erreur){
		       alert('erreurJS');
		     },
		     complete : function(resultat, statut){
		     }
		  });

il fallait écrire:

 data: {IdLigne:IdLigne},

puis dans ma feuille php:

<?php

if(isset($_GET['IdLigne']) && !empty($_GET['IdLigne'])){
$IdLigne=$_GET['IdLigne'];
$reponse = $bdd->query("SELECT * FROM inventaire_actuel WHERE id='$IdLigne' "); 
$donnees = $reponse->fetch() 
 
 ?>

Il fallait écrire cette ligne en plus:

$IdLigne=$_GET['IdLigne'];

et ajouter le $ à cette ligne:

WHERE id='$IdLigne' ");

Ca marche pile poil maintenant, je suis soulagé!

Merci à tous!

-
Edité par BGr45 8 octobre 2021 à 10:50:23