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

Question

我有一个表格，其中显示了一些标题信息。我在表格的最右侧有一个链接，单击该链接时，我希望详细信息显示在当前行下方。我怎样才能达到这个效果？

--编辑--
在下面使用您的想法，我尝试了以下代码（不起作用） -

函数 showRdmDtl(flxkey, 数据) { 变种 fxkey; var anchorId='a_'+flxkey lResponse = JSON.parse(数据); $.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');
});