Discussion :

[francky74]

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]

À 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]

à 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]

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]

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]

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',