使用jQuery在表行之间显示详细信息

Question

我有一个表格,我正在显示一些标题信息.我在桌子的最右边有一个链接,当点击时,我希望在当前行下面显示详细信息.我怎样才能达到这个效果？

- 编辑 -
使用下面的想法,我尝试了以下代码(不起作用) -

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

知道为什么这不起作用吗？

Answer 1

我想你在这里有不同的可能性.例如,您可以在表格的每一行下添加另一行,该行将包含详细信息,并且最初将隐藏这些信息.当用户点击链接时,您只需显示它:

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

另一种可能性是使用AJAX加载有关行的详细信息并将其附加到表中:

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