6

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

        $('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>
4

3 回答 3

16

$(this).parent('tr')不会找到任何东西。您的input元素将位于 atd或 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');
});
于 2012-05-29T11:15:22.643 回答
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');
    });​

工作小提琴

你应该考虑使用$.on因为 $.live 现在已经贬值了

于 2012-05-29T11:16:39.070 回答
0

不推荐使用 useon而不是live,live因为最新版本的 jQuery，您的parent()选择td元素，使用 2parent()方法或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/

于 2012-05-29T11:15:19.477 回答