如何在当前<tr>之后追加新的<tr>

Question

我有以下表格结构.

<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>

Answer 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元素也会调用该单击处理程序.

编号:.clone() ,.insertAfter() ,.live()

Answer 2

另外,你可以写:

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

差别不大但看起来更具可读性.