Question

我正在尝试添加新行，它是当前行的克隆。我试过以下代码。它不会弹出错误但不会添加行。这是我的代码错误吗？还有其他简单的想法吗？

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

HTML布局：

<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

您必须使用$.closest或$.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');
    });

Working Fiddle

你应该考虑使用$.on，因为$ .live现在已经折旧了

Answer 3

使用on代替live，自live选择parent()元素{j}的最新版本后，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/

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

3 个答案: