Comment afficher les details d'une ligne de table html dans une boite de dialogue ?

Version imprimable

01/11/2012, 12h27
diengkals

Comment afficher les details d'une ligne de table html dans une boite de dialogue ?

bonjour , j'ai un tableau (html ) qui contient les informations des Etudiants que je récupérer a partir de la base de la base de données.

Maintenant j'aimerai mettre un lien détail qui va m'afficher les details d'un etudiant dans une boite de dialogue

merci d'avance
01/11/2012, 18h22
danielhagnoul

Bonsoir, voir : clone() et append().
04/11/2012, 12h07
diengkals

merci de votre réponse pourriez vous me donner un exemple d'utilisation avec les tableau html merci d'avance
04/11/2012, 20h32
danielhagnoul
Bonsoir

Ma réponse est du même niveau que votre question, lacunaire.

L'ex-modérateur se demande :
1. Où se trouvent votre début de solution (Règle 4.13), vos codes (HTML, CSS, JS, jQuery) ?
2. Où se trouvent vos codes explorant la piste que je vous ai donnée ?

merci de votre aide :

vocici ce que je veux faire

mon code :

Code:

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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
   <div>
		               <!--     debut  table  affichage  par classe -->
		                <table class="abonnes" id="ideEleve"  style="visibility:<?php echo(isset($_POST['rechercher']))? 'visible':'hidden'; ?>">
 
		                <caption> eleve ajouté</caption>
 
		                <tr>
		                   <th>matricule</th>
 
		                   <th>nom</th>
		                   <th>prenom</th>
		                   <th>sexe</th>		                 		                
		                   <th>supprimer</th>
		                   <th>modifier</th>
		                   <th>reinscrire</th>
		                   <th>details</th>
		                   <th>attestation d'inscription</th>
		                   <th>Liste de la Classe</th>
 
		                </tr>
 
		                 <?php   
		                if(isset($_POST['rechercher']))
                           {  
 
                  $classes= $_REQUEST["choix"];
		        include_once("config/connexion.php");
 
		        $req=mysql_query("select  * from eleve  e , inscrire i   where e.id=i.id_eleve and  i.id_classe='".$classes."'
		                            order by e.matricule   ASC LIMIT  $premiereEntree,$messagesParPage  ");
 
                       }
		        while ($data=mysql_fetch_assoc($req))
		        {
 
		        ?>
		                <tr>
		                  <td class='cellule_tab'><?php echo $data['matricule'] ?></td>
		                  <td class='cellule_tab'>  <?php echo $data['nom'] ?> </td>
		                  <td class='cellule_tab'><?php echo $data['prenom'] ?></td>
		                  <td class='cellule_tab'><?php echo $data['sexe'] ?></td>
		                  <td class='cellule_tab'><a  href="supprimereleve.php?id=<?php  echo $data['id']  ?>"
                   onclick=" return window.confirm('Attention vous  etes au point de supprimer  <?php echo  $data['nom']?> !');">
                   <img src="image/supprimer.jpg" alt="supprimer" style="width:30px; height:30px; border:none;"/></a></td>
                      <td class='cellule_tab'><a  href="modifiereleve.php?id=<?php  echo $data['id']  ?>"
                   > <img src="image/edit.jpg" alt="modifier" style="width:30px; height:30px; border:none;"/></a></td>
                           <td class='cellule_tab'><a  href="reinscrire.php?id=<?php  echo $data['id']  ?>"
                   > <img src="image/inscrire.jpg" alt="reinscrire" style="width:30px; height:30px; border:none;"/></a></td>
                     <td class='cellule_tab'><a  href="attestationInscription.php?id=<?php  echo $data['id']  ?>"
                   > <img src="image/detaille.jpg" alt="details" style="width:30px; height:30px; border:none;"/></a></td>
                           <td class='cellule_tab'><a  href="attestationInscription.php?id=<?php  echo $data['id']  ?>"
                   ><img src="image/print.jpg" alt="imprimer"  style="width:30px; height:30px; border:none;"/></a></td>
                  <td>  <a  href="listeEleveParClasse.php?id_classe=<?php  echo $data['id_classe']  ?>"
                   >la liste de la classe</a>
                      </td>
		                </tr>
 
 
 
		             <?php 
 
		        }
		        ?>  
 
		             <tr>
		                   <table  align="center" id="pag">
		                   <tr>
		                     <?php 
		              if(isset($_POST['rechercher']))
                           {         
		         if($pageActuelle!=1)
                     {
                     	 $precedent=$pageActuelle-1;
                     	  echo'<th>  <a id="pagprecedent" href="consultermedia.php?page='.$precedent.'">precedent</a></th>';   
 
                     }
		           for($i=1; $i<=$nombreDePages; $i++) //On fait notre boucle
                     {
 
                            echo'<th>  <a id="pagination" href="consultermedia.php?page='.$i.'">'.$i.'</a></th>';       
                     }
 
	                      if($pageActuelle<$nombreDePages)
                        {
                        	$suivant= $pageActuelle+1;
                        	   echo'<th>  <a id="pagsuivant" href="consultermedia.php?page='.$suivant.'">suivant</a></th>';   
                        }
 
                      }  
		                     ?>
 
		                   </tr>
 
		            </table>
 
		           </tr> 
	  </table>
   </div>

ici j'ai un lien détails: ce que je veux si je clique sur détails j aurai une boite de dialogue qui va afficher les information de la ligne sélectionner.

j'ai regardé les fonctions append() et clones mais je ne vois comment ça peut m'aider merci d'avance
merci d'avance

05/11/2012, 14h07
SpaceFrog

Citation:

Ma réponse est du même niveau que votre question, lacunaire.

C'est Long comme LaCune :grin:

Bref

Avec getElementsByTagName('tr') tu recupères les lignes
suffit ensuite de prendre le bon indexe et de boucler sur les td de la paligne pour recupérer les innerHTML
05/11/2012, 14h27
diengkals

merci de votre aide:

au fait j'ai une table qui a plus de 10 champs et dans mon tableau j affiche que 4 champs je ne veux pas afficher touts champs sinon j aurai une grande table raison pour la quelle je veux afficher dans une boite boite tous les champs.
Ce que vous me proposez ne me permettrai que d'afficher que les champs afficher dans le tableau.

moi je recherche a faire lorsque je clique sur le lien détails récupérer l'id de la ligne sélectionner maintenant avec l'id je peux parcourir ma table et afficher tous les détails comme on le fait pour supprimer ou modifier la seule différence est qu'on récupéré l'id dans les url

merci d'avance
05/11/2012, 14h54
SpaceFrog

bis répétita ...
getElementsByTagName ou recupération de l'id au clic = même combat

il suffit ensuite de recupérer les td de la ligne avec getElementsByTagName('td')
05/11/2012, 15h16
diengkals

merci bien je pense que vous m avez compris , si je parle des id je ne parle des des id de tableau ou les id de td ou tr je parle de récupérer l identifiant par exemple de l’étudiant maintenant je peux faire tout ce que je veux.

une question ?
est ce que vous me proposez me permettrait d'afficher tout les champs du tableau même si tout les champs ne sont pas afficher dans le tableau merci d'avance
05/11/2012, 15h28
SpaceFrog

si les éléments sont présents sur la page oui
sinon il faudra passer par un ajax pour aller chercher les informations sur le serveur