使用 jQuery 在当前行之后添加新表行

Question

我正在尝试添加新行，该行是当前行的克隆。我尝试了以下代码。它不会弹出错误，但也不会添加行。我的代码有什么错误？有没有其他简单的想法？

        $('input[name="cmdAddRow"]').live('click', function(){
            $curRow = $(this).parent('tr');
            $newRow = $curRow.clone(true);
            console.log($newRow);
            $curRow.after($newRow);
            console.log('added');
        });

网页布局：

<table>
    <tr>
        <td><input type="hidden" name="uin" value="xxx"></td>
        <td><input type="text" name="uname" value=""></td>
        <td><input type="text" name="uadd" value=""></td>
        <td><input type="text" name="utel" value=""></td>
        <td><input type="button" name="cmdAddRow" value="Add"></td>
    </tr>
</table>

Answer 1

$(this).parent('tr')找不到任何东西。您的input元素将位于td或th内。 parent 仅查找元素的直接父级，然后将其与您提供的选择器进行比较。因此，它一无所获。然后你什么都不克隆，并在旧的什么都没有之后插入新的什么。也许不足为奇的是，这实际上没有任何作用。

您需要使用 closest ，它找到与选择器匹配的最近元素

var $curRow = $(this).closest('tr');

另请注意，您使用的是全局变量，因为您没有使用var（我在上面的行中更正了这一点），您可能不想这样做。此外，live不是一个好用的功能;请改用 on，这样可以更优雅地执行相同的操作：

$('#yourTable').on('click', 'input[name="cmdAddRow"]', function() {
    var $curRow = $(this).closest('tr'),
        $newRow = $curRow.clone(true);
    console.log($newRow);
    $curRow.after($newRow);
    console.log('added');
});

Answer 2

你必须使用 $.near 或 $.parents 而不是像这样的$.parent

 $('input[name="cmdAddRow"]').live('click', function(){
        $curRow = $(this).closest('tr');
        $newRow = $curRow.clone(true);
        console.log($newRow);
        $curRow.after($newRow);
        console.log('added');
    });​

工作小提琴

您应该考虑使用 $.on，因为 $.live 现在已贬值

Answer 3

使用

on 而不是 live ，live自最新版本的 jQuery 以来已被弃用，您的parent()选择td元素，使用 2 parent() 方法或closest('tr')：

 $('input[name="cmdAddRow"]').on('click', function(){
            $curRow = $(this).parent().parent();
            $newRow = $curRow.clone(true);
            console.log($newRow);
            $curRow.after($newRow);
            console.log('added');
 });

http://jsfiddle.net/qVm75/3/