show detail information in between table rows with jQuery

Question

I have a table where I'm displaying some header information. I have a link on the far right of the table that, when clicked, I would like to have the detail information appear beneath the current row. How can I achieve this effect?

--Edit--
using your idea below, I tried the following code (which did not work) -

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()
    });
}

Any idea why this would not work?

Answer 1

I think you have different possibilities here. For example you could add under every row of your table another row which will contain the detailed information and which will be hidden at first. When the user clicks on the link you could just show it:

<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();
});

Another possibility would be to use AJAX to load the detailed information about the row and append it to the 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');
});