Afficher les informations détaillées entre les lignes du tableau avec jQuery

Question

J'ai une table où j'affiche des informations d'en-tête. J'ai un lien à l'extrême droite de la table qui, lorsque je clique dessus, j'aimerais que les informations détaillées apparaissent sous la ligne actuelle. Comment puis-je obtenir cet effet?

--Edit--
en utilisant votre idée ci-dessous, j'ai essayé le code suivant (qui ne fonctionne pas) -

 
function showRdmDtl(flxkey, data) { 
    var flxkey; 
    var anchorId='a_'+flxkey 
    lResponse = JSON.parse(data); 
    $.each(lResponse.rdmDetails, function(intIndex, objValue) { 
     $(anchorId).closest('tr').after('').next().append(''+objValue.date+''+objValue.amount+'').show() 
    }); 
} 

Toute idée pourquoi cela ne fonctionnerait pas?

Answer 1

Je pense que vous avez différentes possibilités ici. Par exemple, vous pouvez ajouter sous chaque ligne de votre table une autre ligne qui contiendra les informations détaillées et qui sera cachée au début. Lorsque l'utilisateur clique sur le lien, vous pouvez simplement montrer:

<tr> 
    <td><a href="#">Details</a></td> 
</tr> 
<tr style="display:none;"> 
    <td>Some details about previous row</td> 
</tr> 
... 

$('table a').click(function() { 
    $(this) 
     .closest('tr') 
     .next() 
     .show(); 
}); 

Une autre possibilité serait d'utiliser AJAX pour charger les informations détaillées sur la ligne et l'ajouter à la table:

<tr> 
    <td><a href="#">Details</a></td> 
</tr> 
... 

$('table a').click(function() { 
    $(this) 
     .closest('tr') 
     .after('<tr></tr>') 
     .next() 
     .load('http://www.example.com/details'); 
});