onClick sur ligne de tableau pour recupérer la value d'input de la ligne

**renanar** · 04/03/2012, 16h32

Bonjour, désolé si le sujet a déjà été traité auparavant mais j'ai cherché et rien vu la dessus...

Voila, j'ai un tableau (nom,prenom,age,sexe) dont les valeurs proviennent d'une base de donnée.
Je souhaite, au click d'une ligne, afficher des informations supplémentaires relatives à la ligne en question.

J'ai essayé le script ci dessous mais au click j'obtiens toujours la même valeur...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
function pouressayer(){
valeur = document.getElementById("essais").value;
alert (valeur);
}
</script>
 
<body>
<?php
echo'<table>
<tr >
<th></th>
<th>nom</th>
<th>prenom</th>
<th>age</th>
<th>sexe</th>
</tr>';
 
 
$pdo_options[PDO::ATTR_ERRMODE] = PDO::ERRMODE_EXCEPTION;
$bdd = new PDO('mysql:host=localhost;dbname=utilisateur', 'root', '', $pdo_options);
$reponse = $bdd->query("SELECT distinct * FROM utilisateur ORDER BY nom,prenom,age,sexe");
while ($donnees = $reponse->fetch()) {
echo
'<tr onclick="pouressayer()">
<td><input type="hidden" id="essais" value="' . $donnees["id"] . '">Info</td>
<td id="fichenom">' . $donnees['nom'] . '</td>
<td id="ficheprenom">' . $donnees['prenom'] . '</td>
<td id="ficheage">' . $donnees['age'] . '</td>
<td id="fichesexe">' . $donnees['sexe'] . '</td>
</tr>' . "\n";
}
$reponse->closeCursor();
echo'</table>';
?>

LE PROBLEME :

Imaginons que la premiere ligne de mon tableau est constitué de l'individu dont l'id est 1, si je clique sur sa ligne, la valeur 1 est retournée, mais si je clique sur un autre individu j'ai toujours la valeur 1 affichée...

Quelqu'un peut il m'aider?

Merci par avance.

**NoSmoking** · 04/03/2012, 17h12

Bonjour,
une ID DOIT ETRE UNIQUE, ce qui n'est pas ton cas tous les INPUTs ont pour ID "essais", dont tu auras toujours le résultat du premier élément ayant l'ID "essais".

De plus il te faut à partir de la TR cliquée récupérer l'INPUT correspondant pour en afficher sa valeur.

Enfin le code HTML généré par le PHP est préférable au code PHP pour visualiser d'éventuelle bourde dans le code.

**renanar** · 04/03/2012, 18h08

Merci, pourrais tu eventuellement me soumettre une idée de correction afin que ca fonctionne?

Merci

**NoSmoking** · 04/03/2012, 22h06

concernant ton problème d'ID unique il te suffit, dans la partie PHP d'incrémenter un compteur, dont tu concatènes la valeur de celui ci avec un radical pour obtenr des ID uniques.

concernant la partie javascript il ne t'es pas nécessaire de connaitre l'ID de l'élément mais sa position

sur le onclick de la TR tu place une fonction à laquelle tu passe en paramètre l'objet TR via la variable this, par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<tr onclick="fctClick( this)">

dans la fonction tu récupères la collection des INPUT avec la methode getElementsByTagName, il ne te reste plus qu'à choisir celui qui t'intéresses pour en afficher la valeur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function fctClick( obj){
  // récup. de tous les INPUT de la TR passée en paramètre
  var oInput = obj.getElementsByTagName('INPUT');
  // affichage de la value du 1st
  alert( oInput[0].value);
}

un exemple complet pour voir

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE HTML>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>[...]</title>
<script type="text/javascript">
function fctClick( obj){
  // récup. de tous les INPUT de la TR passée en paramètre
  var oInput = obj.getElementsByTagName('INPUT');
  // affichage de la value du 1st
  alert( oInput[0].value);
}
</script>
</head>
<body>
<table border>
  <tr onclick="fctClick( this)">
    <td><input type="hidden" id="input_1" value="Info Input 1">Info</td>
    <td>nom</td><td>prenom</td><td>age</td><td>sexe</td>
  </tr>
  <tr onclick="fctClick( this)">
    <td><input type="hidden" id="input_2" value="Info Input 2">Info</td>
    <td>nom</td><td>prenom</td><td>age</td><td>sexe</td>
  </tr>
  <tr onclick="fctClick( this)">
    <td><input type="hidden" id="input_2" value="Info Input 3">Info</td>
    <td>nom</td><td>prenom</td><td>age</td><td>sexe</td>
  </tr>
</table>
</body>
</html>

tu as toutes les billes pour t'en sortir.

onClick sur ligne de tableau pour recupérer la value d'input de la ligne

JavaScript

Discussions similaires

Partager

Partager