Как добавить новый <tr> после текущего <tr>

У меня есть следующая структура таблицы.

<table>
    <tr>
        <td><a href="#"></td>
    </tr>
</table>

Когда я нажимаю <a>, я хочу добавить новый <tr> рядом с <tr>, на который нажата кнопка <a>.

Таким образом, результат будет:

<table>
    <tr>
        <td><a href="#"></td>
    </tr>
    <tr>
        <td><a href="#"></td>
    </tr>
</table>

Ответ 1

Пример:

$('a').bind('click', function(){
  $('<tr><td>new td</td></tr>').insertAfter($(this).closest('tr'));
});

Если вы хотите создать клон, используйте:

$('a').live('click', function(){
  var $this     = $(this),
      $parentTR = $this.closest('tr');

  $parentTR.clone().insertAfter($parentTR);
});

Пример ссылки: http://www.jsfiddle.net/7A6MQ/

В принципе, вы создаете копию из tr element (которая включает дочерние узлы) и вставляете эту копию после этого элемента. Поэтому вам понадобится привязка .live, чтобы убедиться, что вновь созданные элементы a также вызывают этот обработчик кликов.

Ref.: . clone(), . insertAfter(), . live()

Ответ 2

Кроме того, вы можете написать:

$('a').bind('click', function () {
    $(this).closest('tr').after('<tr><td>new td<td></tr>');
});

Не так много различий, но выглядит более читаемым.

Ответ 3

Вот код. Пожалуйста, проверьте и сообщите мне, есть ли какие-либо проблемы.

function AddRaw(obj){
var $this     = obj;
$parentTR = $this.closest('tr');
$parentTR.clone().insertAfter($parentTR);
}