Show detail information in between table rows with jQuery

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 de开发者_运维知识库tail 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?

---

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