Effet Dynamic Slidedown utilisant jQuery pour lire les données d'une table

Question

Je souhaite répertorier certains enregistrements de la table dans une page ASP.NET. Pour chaque enregistrement, je veux afficher certaines données et en même temps, fournir un bouton pour qu'ils puissent cliquer. Je veux afficher un "BOUTON CLIQUER SUR AFFICHER" Si ils cliquent sur le bouton, je veux faire glisser une boîte vers le bas (en utilisant jQuery) pour afficher les autres détails de l'enregistrement. Un exemple de ce que je cherche peut être trouvé ici.

Sample of drop down

Je préférerais avoir une fonction pour gérer les détails. Je voudrais que la boîte apparaisse juste en dessous de chaque enregistrement et non en bas de la page. Existe-t-il un moyen de le faire en utilisant jQuery? Je regardais la pellicule, ajoutais mais ne savais pas comment s'y prendre.

Answer 1

Mettez la boîte dans votre balise ASP, mais le cacher:

<a href="javascript:showDetails(123);">Show details</a> 
<div id="details123" style="display: none"></div> 

maintenant implémenter une fonction pour afficher/charge:

function showDetails(recordId) { 
    var detailsDiv = $("#details" + recordId); 
    // load stuff -- replace this with whatever is 
    // appropriate for your app 
    $.getJSON("/myapp/someJSONfunction?recordId=" + recordId, 
     null, 
     // this will be run if successful 
     function(data) { 
      if (data.value) { 
       detailsDiv.text(data.value).slideDown(); 
      } 
     } 
    }); 
}