2009-09-01 4 views
0

J'utilise php pour afficher une table de données tirée de ma base de données mysql. J'ai une boucle while qui boucle à travers chaque ligne et crache les données de l'utilisateur.création de menus déroulants dans une boucle while avec des données dynamiques à l'aide de jquery

Je veux avoir un bouton plus de détails qui une fois pressé descendra vers le bas une boîte de div affichant «plus de détails» au sujet de l'utilisateur. Le problème que j'ai rencontré est lorsque je crée le div pour contenir plus de détails, je ne peux pas comprendre comment le rendre unique pour chaque utilisateur.

Lorsque je clique sur le lien plus de détails, il ouvre toujours le plus haut div seulement ... parce que mes identifiants ne sont pas uniques. Pour rendre le div unique je pourrais juste faire un compte à eux et à l'href mais je ne suis pas sûr de savoir comment le passer en jquery comme paramètre de sorte que lorsque je clique sur le lien plus de détails à côté d'un nom d'utilisateur, plus de détails div spécifique à cet utilisateur.

J'ai joué avec le code ci-dessous sans beaucoup de chance, aide appréciée. Merci.

<script type = "text/javascript"> 
    $(document).ready(function(){ 
     $('a.moreDetails').click(function() { 
      $("#moreDetails").toggle('fast'); 
     }); 
    }); 
    </script> 


while() 
{ 

user info... more details href 
<div></div> to display below once more details href has been clicked. 

} 

Répondre

1

Que diriez-vous:

$('a.moreDetails').click(function() { 
    $(this).next().toggle('fast'); 
}); 

Cela prendra l'élément suivant après le lien d'ancrage (<a>) et choisir de l'afficher.

Ensuite, le code HTML pourrait ressembler

User 1 (username) <a href="#" class="moreDetails">(details)</a> 
<div class="details">More details about User 1</div> 
+0

Merci, j'ai eu un peu de mal au début parce que j'avais le href à l'intérieur d'une table et quand je l'ai cliqué, le div n'apparaissait pas. Mais une fois que je l'ai sorti de la table et l'ai mis directement au-dessus de la div cela a fonctionné. Existe-t-il un moyen de spécifier les éléments next() à f ind juste div et non les cellules de table, je présume que c'est ce qu'il faisait. – payling

+0

Vous pouvez sauter jusqu'à la div parent, puis obtenir l'élément TD suivant et basculer cela: '$ (this) .parent(). Next(). Toggle ('rapide');' jQuery vous donne tout sortes d'outils pour naviguer d'un élément à l'autre. Jetez un oeil à http://docs.jquery.com/Traversing pour plus d'informations. –

0

si votre code ressemble à la

while() 
{ 

user info... more details href 
<a class="moreDetails" href="">blabla more details</a> 
<div></div> to display below once more details href has been clicked. 

} 

suivante vous pouvez basculer le div après le lien "moreDetails" comme ça:

$(document).ready(function(){ 
     $('a.moreDetails').click(function() { 
      $(this).next().toggle('fast'); 
    }); 
}); 

Questions connexes