Obtenir la valeur d'un <td> lorsque l'on clique sur la ligne du tableau généré en php

**francky74** · 18/03/2015, 23h12

Bonjour,

Je désire, lors d'un clic sur une des lignes d'un tableau généré en php, obtenir les valeurs de chaque case de la ligne qui a été cliquée et insérer chacune de ces valeurs dans des champs input qui ont été construits en html.

Voici la génération du tableau en php :

Code php :

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
    echo '
        <table id="tabpers">
            <tr>
                <th>Nom</th>
                <th>Prénoms</th>
                <th>Date naiss</th>
                <th>Commune naiss</th>
                <th>Dépt naissance</th>
            </tr>
    ';
 
    $reponse = $bdd->query('SELECT pers_id, '.$field.', '.$field1.', pers_datenaiss, pers_communenaiss, pers_deptnaiss
            FROM '.$table.'
            WHERE SUBSTRING('.$field.', 1, '.strlen($element).') LIKE "'.$element.'"
            ORDER BY '.$field.', '.$field1.' ASC LIMIT 15');
 
    while($donnees = $reponse->fetch())
    {
        echo '
    <tr id="'.$donnees['pers_id'].'" onclick="remplichamps(\'personnes\', (this.id), this);">
        <td>'.$donnees['pers_nom'].'</td>
        <td>'.$donnees['pers_prenom'].'</td>
        <td>'.$donnees['pers_datenaiss'].'</td>
        <td>'.$donnees['pers_communenaiss'].'</td>
        <td>'.$donnees['pers_deptnaiss'].'</td>
    </tr>';
    }
echo'</table>';
$reponse->closeCursor();

Voici le <div> dans lequel est inséré le tableau (<div> construit en html):

Code html :

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

1
2
<div id="listepers">
</div>

voici les champs où je désire inscrire les values (champs construits en html):

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
<div id="divpershphysique" class="divpersh">	
   <label for="madame">Madame</label>		
   <input type="radio" name="genre" value="0" id="madame"/>
   <label for="monsieur">Monsieur</label>		
   <input type="radio" name="genre" value="1" id="monsieur"/>
   <br/><br/>
   <label for="nom">Nom* : </label>
   <input type="text" id="nom" name="nom" autocomplete="off" onKeyUp="suggest(this.name, this.value, 'personnes', 'pers_nom');"/>
 
   <label for="prenom">prenoms* : </label>
   <input type="text" id="prenoms" name="prenoms" autocomplete="off" onKeyUp="suggest(this.name, this.value, 'personnes', 'pers_prenom');"/>
   <br/><br/>
 
   <label for="datenaiss">Date de naissance (aaaa-mm-jj)* :
   <input type="date" value="2014-12-25" id="datenaiss"/></label>
 
   <label for="lieunaiss">Commune de naissance :</label>
   <input type="text" id="lieunaiss"/>
 
   <label for="dept">Département :
   <input type="text" id="dept"/></label>
   <br/><br/>
</div>

voici le code JQUERY que j'ai fait mais qui ne fonctionne pas (j'ai testé plein de choses mais là je cale ...):

Code :

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

1
2
3
    $("#listepers").delegate('table > tbody > tr', 'click', function(){
    	$("#nom ").val($("#listepers").delegate('table > tbody > tr > td',);
    });

Sur la doc, je ne trouve que des examples qui me permettent de remplir l'attribut value mais pas d'obtenir cet attribut. J'ai pensé à ".attr('id')" mais je ne vois pas comment le mettre en oeuvre avec le delegate.
Faudrait-il que je donne un id à chaque <td> de mon tableau lors de la génération en PHP (avec un integer incrémenté pour rendre l'id unique ...) ?

Pour prévoir l'utilisation des id des <td>, j'ai d'ores et déjà intégré les id aux <td> de cette façon :

Code php :

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
$i = 0;
while($donnees = $reponse->fetch())
    {
        echo '
            <tr id="'.$donnees['ent_id'].'" onclick="remplichamps(\'entreprises\', (this.id), this);">
                <td id="'.$i.'">'.$donnees['ent_nom'].'</td>';
        $i = $i + 1;
        echo '
                <td id="'.$i.'">'.$donnees['ent_siret'].'</td>';
        $i = $i + 1;
        echo '
                <td id="'.$i.'">'.$donnees['stat_nom'].'</td>';
        $i = $i + 1;
        echo '
                <td id="'.$i.'">'.$donnees['pers_nom'].'</td>';
        $i = $i + 1;
        echo '
                <td id="'.$i.'">'.$donnees['pers_prenom'].'</td>';
        $i = $i + 1;
        echo '
            </tr>
            ';
    }

Je vous remercie de bien vouloir m'aider !!!

**selios** · 19/03/2015, 01h53

À mon avis, tu t'embêtes à faire des sélecteurs à rallonge.
Pour commencer, ta table a un ID, alors utilise-le pour la sélectionner:

Code :

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

$('#tabpers')

Puis, pour sélectionner les lignes, fais un find():

Code :

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

$('#tabpers').find('tr')

Et plutôt que de t'embêter avec des delegate(), si tu n'as besoin que d'une action basique sur un click, utilise click():

Code :

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

$('#tabpers').find('tr').click(function(){...})

Ensuite, lorsque tu génères ton tableau, attribue des classes à tes <td>, comme ceci :

Code :

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

1
2
3
4
5
6
7
<tr id="0001">
	<td class="nom" >Dupont</td>
	<td class="prenoms" >Martin</td>
	<td class="datenaiss" >01/01/1901</td>
	<td class="lieunaiss" >Paris</td>
	<td class="dept" >01</td>
</tr>

Ça devient beaucoup plus facile de les sélectionner dans jQuery, par exemple :

Code :

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

$('td.nom')

Puis pour sélectionner le <td> d'une ligne spécifique, commence par stocker l'ID de la ligne clickée dans une variable, appelons-là ligneID:

Code :

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

1
2
3
$('#tabpers').find('tr').click(function(){
	var ligneID = $(this).attr("id");
...}

Tu n'as plus qu'à concaténer l'ID avec le sélecteur de chaque case:

Code :

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

$('#' + ligneID + ' td.nom')

Voilà.
À part ça, j'ai l'impression qu'il y a peut-être quelques coquilles dans ton code, par exemple "prenom" qui apparaît avec et sans -s.
Et je ne sais pas trop ce que tu cherches à faire avec ça:

Code :

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

onclick="remplichamps(\'entreprises\', (this.id), this);"

Au cas où il te manquerait encore des éléments, voilà une page en HTML qui fonctionne,
tu peux le copier et le coller directement dans un fichier pour tester :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
<html>
<head>
	<meta charset="UTF-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script>
	$(document).ready(function() {
        var ligneID;
		$('#tabpers').find('tr').click(function(){
            ligneID = $(this).attr("id");
			$("#nom")       .val( $('#' + ligneID + ' td.nom')         .text());
			$("#prenoms")   .val( $('#' + ligneID + ' td.prenoms')     .text());
			$("#datenaiss") .val( $('#' + ligneID + ' td.datenaiss')   .text());
			$("#lieunaiss") .val( $('#' + ligneID + ' td.lieunaiss')   .text());
			$("#dept")      .val( $('#' + ligneID + ' td.dept')        .text());
		});
	});
	</script>
</head>
 
<body>
	<div id="listepers">
		<table id="tabpers">
			<tr>
				<th>Nom</th>
				<th>Prénoms</th>
				<th>Date naiss</th>
				<th>Commune naiss</th>
				<th>Dépt naissance</th>
			</tr>
			<tr id="0001">
				<td class="nom"         >Dupont</td>
				<td class="prenoms"     >Martin</td>
				<td class="datenaiss"   >01/01/1901</td>
				<td class="lieunaiss"   >Paris</td>
				<td class="dept"        >01</td>
			</tr>
            <tr id="0002">
                <td class="nom"         >Dupont</td>
                <td class="prenoms"     >Marie</td>
                <td class="datenaiss"   >02/02/1902</td>
                <td class="lieunaiss"   >Lyon</td>
                <td class="dept"        >69</td>
            </tr>
		</table>
	</div>
 
	<div id="divpershphysique" class="divpersh">
	   <label for="madame">Madame</label>
	   <input type="radio" name="genre" value="0" id="madame"/>
	   <label for="monsieur">Monsieur</label>
	   <input type="radio" name="genre" value="1" id="monsieur"/>
	   <br/><br/>
	   <label for="nom">Nom* : </label>
	   <input type="text" id="nom" name="nom" autocomplete="off" onKeyUp="suggest(this.name, this.value, 'personnes', 'pers_nom');"/>
 
	   <label for="prenoms">prenoms* : </label>
	   <input type="text" id="prenoms" name="prenoms" autocomplete="off" onKeyUp="suggest(this.name, this.value, 'personnes', 'pers_prenom');"/>
	   <br/><br/>
 
	   <label for="datenaiss">Date de naissance (aaaa-mm-jj)* :
	   <input type="date" value="2014-12-25" id="datenaiss"/></label>
 
	   <label for="lieunaiss">Commune de naissance :</label>
	   <input type="text" id="lieunaiss"/>
 
	   <label for="dept">Département :
	   <input type="text" id="dept"/></label>
	   <br/><br/>
	</div>
</body>
</html>

**SpaceFrog** · 19/03/2015, 08h45

à préciser qu'un td n'a pas de value mais un innerHTML

Sinon lors du click le td est $(this)
=>

Code :

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

$(this).text()

**francky74** · 19/03/2015, 09h21

Bonjour,

Je vous remercie pour vos réponses !

À mon avis, tu t'embêtes à faire des sélecteurs à rallonge.
Pour commencer, ta table a un ID, alors utilise-le pour la sélectionner:

Et plutôt que de t'embêter avec des delegate()

La sélection des tr cliqués que j'ai codée fonctionne très bien.
Impossible d'utiliser la méthode que vous conseillez étant donné que la <table> a été générée en PHP. Tout ce qui est généré en php ne figure pas dans le code source de la page mais dans la mémoire allouée au navigateur. Ainsi, pour faire une telle sélection on ne peux pas utiliser le DOM. Il faut sélectionner à partir d'un élément du DOM (ici $("#listepers")) puis faire un .delegate ou .on (que je n'ai jamais utilisé) pour sélectionner tout ce qui n'est pas dans le DOM (ici .delegate('table > tbody > tr', 'click', function(){ ...etc).
Pour preuve, voici le code source de ma page, vous verrez que la table n'y figure pas et que le <div id="listepers"> est complètement vide alors que je vois bien qu'il y a la présence, graphiquement sur ma page, du tableau:

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
<div id="divpershphysique" class="divpersh">	
	<label for="madame">Madame</label>		
  	<input type="radio" name="genre" value="0" id="madame"/>
  	<label for="monsieur">Monsieur</label>		
  	<input type="radio" name="genre" value="1" id="monsieur"/>
  	<br/><br/>
  	<label for="nom">Nom* : </label>
	<input type="text" id="nom" name="nom" autocomplete="off" onKeyUp="suggest(this.name, this.value, 'personnes', 'pers_nom');"/>
	<label for="prenom">prenoms* : </label>
	<input type="text" id="prenoms" name="prenoms" autocomplete="off" onKeyUp="suggest(this.name, this.value, 'personnes', 'pers_prenom');"/>
  	<br/><br/>
  	<label for="datenaiss">Date de naissance (aaaa-mm-jj)* :
  	<input type="date" value="2014-12-25" id="datenaiss"/></label>
  	<label for="lieunaiss">Commune de naissance :</label>
  	<input type="text" id="lieunaiss"/>
  	<label for="dept">Département :
  	<input type="text" id="dept"/></label>
  	<br/><br/>
</div>
<div id="listepers">
</div>
<div id="boutonsidentite" class="boutons">
	<button type="button" value="valider" id="valider" onmouseup="validerModif();" disabled>VALIDER 1 ère PERSONNE</button>
	<button type="button" value="valider2" id="valider2" onmouseup="validerModif2();" disabled>VALIDER AUTRE PERSONNE</button>
	<button type="button" value="creernouvellepers" id="creerpers">CREER NOUVELLE PERSONNE</button>
	<button type="button" value="adressedemandeur" id="adressedemandeur" onmouseup="etapeadresse();">ETAPE SUIVANTE</button>
	<br/><br/>
</div>

lorsque tu génères ton tableau

Le tableau n'est pas rempli à la main ! le données insérées dans le tableau proviennent d'une BDD. De plus la génération de mon tableau fonctionne très bien.

Sinon lors du click le td est $(this)

Je viens de tester ceci mais cela ne foctionne pas. J'ai bien mes "coucou" qui apparaissent mais pas la valeur.

Code :

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

1
2
3
4
5
6
7
$("#listepers").delegate('table > tbody > tr', 'click', function(){
    	$("#nom").val("coucou");
    	$("#prenoms").val($(this).text.innerHTML);
    	$("#datenaiss").val("coucou");
    	$("#lieunaiss").val("coucou");
    	$("#dept").val("coucou");
    });

Merci à tous !

**SpaceFrog** · 19/03/2015, 09h28

Le tableau n'est pas rempli à la main ! le données insérées dans le tableau proviennent d'une BDD. De plus la génération de mon tableau fonctionne très bien.

que ce soit php qui génère le tableau ou n'importe quel autre langage, peu importe,

la question est plutôt de savoir quand ...
si le code html arrive sur le navigateur du client au chargement, pas de souci, les td bénéficieront des évènements attribués dans le load
si c'est Après le chargement de la page par modification dynmaique du DOM (quelle que soit l'origine du code rajouté, création js ou ajax ...) il faudra utiliser le on() par délégation ou delegate() afin que les éléments rajoutés se voient attribués les évènements.

**francky74** · 19/03/2015, 09h38

Le PHP génère le tableau après le chargement de la page. Merci pour cette précision !!!

Je viens de tester ceci mais cela ne foctionne pas. J'ai bien mes "coucou" qui apparaissent dans les champs lorsque je clique sur le tableau, mais pas la valeur.

Code :

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

1
2
3
4
5
6
7
 
    $("#listepers").delegate('table > tbody > tr', 'click', function(){
    	$("#nom").val("coucou");
    	$("#prenoms").val($(this).text.innerHTML);
    	$("#datenaiss").val("coucou");
    	$("#lieunaiss").val("coucou");
    	$("#dept").val("coucou");

Pour être sûr que j'ai bien compris, le $(this) fait bien référence à ceci ?

Code :

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

 $("#listepers").delegate('table > tbody > tr',

**SpaceFrog** · 19/03/2015, 10h14

Code :

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

$("#datenaiss") =

tu parles de tr ...
tu en as donc plusieurs ???

Un id DOIT être UNIQUE sur la page ...

**francky74** · 19/03/2015, 10h29

Ben en fait, il y a plusieurs tr dans le tableau mais un seul est cliqué. Dans un tr, il y a 5 td. et je souhaite que la valeur de chaque td appartenant au tr cliqué soit inscrite chacune dans un champs input text différent.
Voici, graphiquement ce que ça donne (on voit quelques champs vides mais ils ne le sont pas toujours, ici ce sont des essais) :
Nom : CapturerTR.JPG
Affichages : 7191
Taille : 56,1 Ko

Nom : CapturerTR.JPG
Affichages : 7191
Taille : 56,1 Ko

on clique sur un tr du tableau du bas et cela rempli les champs du haut avec les valeurs inscrites dans les td appartenant au tr cliqué.

Et je rapelle que le tableau est généré en php après la création de la page et n'apparait donc pas dans le code source ! le <div> qui contient donc le tableau est vide dans le code source. Le tableau est présent dans le cache du navigateur.
code source du div qui contient le tableau :

Code html :

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

1
2
<div id="listepers">
</div>

Merci !!!

**SpaceFrog** · 19/03/2015, 10h49

Il semblerait que ton souci rejoigne cette problématique ...

http://www.developpez.net/forums/d15...e-generes-php/

le delegate() ou on() par délégation devant se faire à partir d'un élément existant sur la page au chargement ...

**francky74** · 20/03/2015, 11h20

Bonjour,

Bon depuis hier, j'ai essayé plein de trucs en mixant le conseil de Selios (des classes dans les td) ainsi que celui de Spacefrog (delegate), mais je ne parviens toujours pas à mes fins ...
Voici où j'en suis niveau JQUERY :

Code :

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

1
2
3
4
5
$("#listepers").delegate('table > tbody > tr', 'click', function(){
   var ligneID = $(this).attr("id");
   var nomtd = $('#' + lignID + 'td.nom').html();
   $("#nom").val(nomtd);
});

Dans la génération du tableau, j'ai ajouté / enlevé les quelques éléments conseillés par SELIOS :

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
while($donnees = $reponse->fetch()){
   echo '
      <tr id="'.$donnees['pers_id'].'">
         <td class="nom">'.$donnees['pers_nom'].'</td>
         <td class="prenoms">'.$donnees['pers_prenom'].'</td>
         <td class="datenaiss">'.$donnees['pers_datenaiss'].'</td>
         <td class="lieunaiss">'.$donnees['pers_communenaiss'].'</td>
         <td class="deptnaiss">'.$donnees['pers_deptnaiss'].'</td>
      </tr>
   ';
}

J'ai aussi essayé ceci :

Code :

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

1
2
3
4
5
$("#listepers").on('click', 'table > tbody > tr', function(){
   var ligneID = $(this).attr("id");
   var nomtd = $('#' + lignID + ' td.nom').html();
   $("#nom").val(nomtd);
});

et pour tester j'ai essayé cela, qui me retourne tout de même l'id dans le champs portant l'id : "nom" donc je sens que je me rapproche du but, il ne me reste qu'à stocker la valeur du td avant de la donner au champs ....

Code :

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

1
2
3
4
$("#listepers").on('click', 'table > tbody > tr', function(){
   var ligneID = $(this).attr("id");
$("#nom").val(ligneID );
});

En espérant que vous ayez d'autres conseils, merci

**SpaceFrog** · 20/03/2015, 11h34

Code :

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

1
2
3
4
5
$("#listepers").on('click','tr', 'click', function(){
   var ligneID = $(this).attr("id");
   var nomtd = $('#' + lignID + 'td.nom').html();
   $("#nom").val(nomtd);
});

**Bovino** · 20/03/2015, 11h36

J'ai l'impression que tu te compliques la vie pour pas grand chose...

Déjà, pourquoi utilises-tu .delegate() ? Y a-t-il des lignes insérées dynamiquement après le chargement de la page ?
Ensuite, pourquoi utiliser un sélecteur si compliqué ('table > tbody > tr') ? Il suffit de mettre une classe spécifique sur les lignes ciblées et tu auras un sélecteur simple...
Ensuite, pourquoi vouloir récupérer l'id de la ligne cliquée si c'est juste pour créer un sélecteur qu'en plus tu crées mal (essaye de voir ce qu'il donne réellement pour comprendre) ? Utilise plutôt $(this).find('.nom')...

EDIT
@Spaffy :

Si l'id vaut foo, $('#' + lignID + 'td.nom') donnera $('#footd.nom'), c'est pas bon et inutilement compliqué.

**selios** · 20/03/2015, 11h43

Envoyé par Bovino

@Spaffy :

Si l'id vaut foo, $('#' + lignID + 'td.nom') donnera $('#footd.nom'), c'est pas bon et inutilement compliqué.

J'avais proposé l'idée, mais tu as raison, les sélecteurs composés commençant par un ID sont déconseillés.
Ce n'était pas exactement ce que j'avais indiqué, cependant. Il y a une espace avant le td.

**francky74** · 20/03/2015, 11h45

Bonjour,

Merci pour vos aides !

Je suis obligé d'utiliser .delegate ou .on car mon tableau est créé dynamiquement après le chargement de la page initiale et le code du tableau ne figure donc pas dans le code source de la page.

pourquoi utiliser un sélecteur si compliqué ('table > tbody > tr') ?

Je l'utilise parce qu'avec cette syntaxe, j'arrive à sélectionner le tr que je veux et ensuite, j'arrive à récupérer son id par la ligne suivante :

Code :

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

var ligneID = $(this).attr("id");

Cet ID me sert à récupérer une valeur inclue dans les td appartenants à la ligne cliquée. Je souhaite récupérer tous les td de la ligne cliquée pour les afficher un à un dans les champs intput.
Certes, mon code ne gère pour l'instant qu'un seul td, mais c'est parce que je suis en phase de tests. Lorsque j'aurais réussi à remplir, suite à un click sur un tr, 1 champs avec la valeur que contient 1 td, je pourrais ensuite m'occuper de tous les autres td appartenants au tr cliqué.

**SpaceFrog** · 20/03/2015, 11h49

Oui .. bon un malheureux copier coller ...
Je m'attachais au selecteur pour le on() ... j'ai pas tenu compte du contenu

Code :

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

1
2
3
$("#listepers").on('click','tr', 'click', function(){
  // Ici la fonction 
});

**francky74** · 20/03/2015, 11h59

La sélection par le .on fonctionne très bien elle aussi, merci Spacefrog !

Pourriez-vous me confirmer quelle fonction je dois utiliser pour obtenir une valeur inclue dans un td ?

Je pose cette question car sur internet on trouve une pléthore de fonctions censées donner la valeur d'un td. Dans mes recherches, je suis tombé sur .text(), .textContent(), innerhtml() ou html() ... et donc lorsque je teste une nouvelle sélection, je suis obligé de faire plusieurs fois le même test en changeant la fonction d'obtention de la valeur d'un td ... pas très pratique.

J'ai essayé cela aussi :

Code :

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

1
2
3
4
5
$("#listepers").on('click', 'table > tbody > tr', function(){
   var ligneID = $(this).attr("id");
   var nomtd = $(this).$('#' + lignID + ' td.nom').html();
   $("#nom").val(nomtd);
});

Muchas gracias !

**SpaceFrog** · 20/03/2015, 12h55

Code :

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

1
2
3
$("#listepers").on('click', 'table > tbody > tr', function(){
  alert( $(this).find('td:eq(0)=.html())
});

**Bovino** · 20/03/2015, 14h10

Sauf que de nos jours, on ne code plus comme dans les années 90, on utilise des techniques actuelles...

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
while($donnees = $reponse->fetch()){
   echo '
      <tr class="ligne" data-nom="'.$donnees['pers_nom'].'" data-prenom="'.$donnees['pers_prenom'].'" data-datenaiss="'.$donnees['pers_datenaiss'].'" data-lieunaiss="'.$donnees['pers_lieunaiss'].'" data-deptnaiss="'.$donnees['pers_dptnaiss'].'">
         <td class="nom">'.$donnees['pers_nom'].'</td>
         <td class="prenoms">'.$donnees['pers_prenom'].'</td>
         <td class="datenaiss">'.$donnees['pers_datenaiss'].'</td>
         <td class="lieunaiss">'.$donnees['pers_communenaiss'].'</td>
         <td class="deptnaiss">'.$donnees['pers_deptnaiss'].'</td>
      </tr>
   ';
}

Code :

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

1
2
3
4
5
6
7
8
$("#listepers").on('click', '.ligne', function(){
  var $this = $(this);
  console.log($this.data('nom'));
  console.log($this.data('prenom'));
  console.log($this.data('datenaiss'));
  console.log($this.data('lieunaiss'));
  console.log($this.data('dptnaiss'));
});

**francky74** · 20/03/2015, 14h21

BINGO !!!

Merci la grenouille !!!! KROAAA !

Voici un résumé pour expliquer la solution :

Tout d'abord, lorsque votre tableau est créé dynamiquement après le chargement de la page initiale, il faut utiliser .delegate ou .on

Ensuite, voici le code PHP de la génération de mon tableau dans le <div id="listepers"> :

Code php :

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?php
$name = $_REQUEST['name'];
$element = $_REQUEST['element'];
$table = $_REQUEST['table'];
$field = $_REQUEST['field'];
 
try
{
    $bdd = new PDO('mysql:host=localhost;dbname=bdd;charset=utf8', 'root', 'rrrr');
}
catch (Exception $e)
{
    die('Erreur : ' . $e->getMessage());
}
 
// PERSONNES
if ($table == 'personnes')
{
    if ($field == 'pers_nom')
    {
        $field1 = 'pers_prenom';
    }
    if ($field == 'pers_prenom')
    {
        $field1 = 'pers_nom';
    }
 
    echo '
        <table id="tabpers">
            <tr>
                <th>Nom</th>
                <th>Prénoms</th>
                <th>Date naiss</th>
                <th>Commune naiss</th>
                <th>Dépt naissance</th>
            </tr>
    ';
 
    $reponse = $bdd->query('SELECT pers_id, '.$field.', '.$field1.', pers_datenaiss, pers_communenaiss, pers_deptnaiss
            FROM '.$table.'
            WHERE SUBSTRING('.$field.', 1, '.strlen($element).') LIKE "'.$element.'"
            ORDER BY '.$field.', '.$field1.' ASC LIMIT 15');
 
    while($donnees = $reponse->fetch())
    {
        echo '
    <tr id="'.$donnees['pers_id'].'">
        <td>'.$donnees['pers_nom'].'</td>
        <td>'.$donnees['pers_prenom'].'</td>
        <td>'.$donnees['pers_datenaiss'].'</td>
        <td>'.$donnees['pers_communenaiss'].'</td>
        <td>'.$donnees['pers_deptnaiss'].'</td>
    </tr>';
    }
}

voici le code html de la construction du <div id ="listepers"> et des champs qui doivent réceptionner les données :

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
<div id="divpershphysique" class="divpersh">	
   <label for="madame">Madame</label>		
   <input type="radio" name="genre" value="0" id="madame"/>
 
   <label for="monsieur">Monsieur</label>		
   <input type="radio" name="genre" value="1" id="monsieur"/> 
   <br/><br/>
   <label for="nom">Nom* : </label>
   <input type="text" id="nom" name="nom" autocomplete="off" onKeyUp="suggest(this.name, this.value, 'personnes', 'pers_nom');"/>
 
   <label for="prenoms">prenoms* : </label>
   <input type="text" id="prenoms" name="prenoms" autocomplete="off" onKeyUp="suggest(this.name, this.value, 'personnes', 'pers_prenom');"/> 
   <br/><br/>
 
   <label for="datenaiss">Date de naissance (aaaa-mm-jj)* :
   <input type="date" value="2014-12-25" id="datenaiss"/></label>
 
   <label for="lieunaiss">Commune de naissance :</label>
   <input type="text" id="lieunaiss"/>
 
   <label for="dept">Département :
   <input type="text" id="dept"/></label>
   <br/><br/>
</div>
<div id="listepers">
</div>

Voici le code JQUERY qui, lors d'un clic sur une ligne du tableau, va afficher dans des champs les données inscrites dans les td appartenant au tr cliqué :

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
 
$("#listepers").on('click', 'tr', 'click', function(){
for (var i = 0; i < 4; i ++)
   {
      var nomtd = $(this).find('td:eq(0)').html();
      var prenomtd = $(this).find('td:eq(1)').html();
      var datetd = $(this).find('td:eq(2)').html();
      var lieutd = $(this).find('td:eq(3)').html();
      var depttd = $(this).find('td:eq(4)').html();
 
      $("#nom").val(nomtd);
      $("#prenoms").val(prenomtd);
      $("#datenaiss").val(datetd);
      $("#lieunaiss").val(lieutd);
      $("#dept").val(depttd);
   }
});

Merci pour tous ces conseils enrichissants

**Bovino** · 20/03/2015, 14h27

Code :

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

var nomtd = $(this).find('td:eq(0)').html();

J'avoue que je ne suis pas trop fan de ce genre de syntaxe qui est beaucoup trop dépendant de la structure HTML. Du coup, si tu modifies celle-ci, ton code ne fonctionne plus sans forcément retrouver pourquoi.
Puisque tes cellules possèdent des classes spécifiques, autant sans servir

Code :

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

var nomtd = $(this).find('.nom').html();

Comme ça, tu peux modifier autant que tu veux la structure HTML, tu retrouveras toujours le bon élément.

Obtenir la valeur d'un <td> lorsque l'on clique sur la ligne du tableau généré en php

jQuery

Discussions similaires

Partager

Partager