Показать подробную информацию между строками таблицы с помощью 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');
});