使用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元素将在a td或a中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');
});