jquery - 使用 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');
        });

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');
});