Question

以下是代码：

function newRow(){
    var sourceRow = $('table#listings tr.row').html();
    $('table#listings > tbody:last').append('<tr>'+sourceRow+'</tr>');
    return false;
}

HTML：

<table id='listings'>
<tbody>
    <tr>
        <td><input type='text' name='entry[]' value='ENTRY1' />
    </tr>
</tbody>
</table>

代码有效，但我将如何自动清除新添加的行文本框？因为它复制了前一行的所有内容。我试过了：

var sourceRow = $('table#listings tr.row').html();
var x = $(sourceRow).('input').children().val(''); //problematic line
$('table#listings > tbody:last').append('<tr>'+sourceRow+'</tr>');
return false;

但没有用。

我想要一个输出：

<table id='listings'>
<tbody>
    <tr>
        <td><input type='text' name='entry[]' value='ENTRY1' />
    </tr>
    <tr>
        <td><input type='text' name='entry[]' value='' />
    </tr>
</tbody>
</table>

Answer 1

这个怎么样？

如果可以避免，则不应将HTML序列化为字符串。你想要克隆元素。

同时将选择器缓存到表中。这意味着您只需选择一次。

function newRow(){
    var table = $('table#listings'),
        newRow = table.find('tr:first').clone();

    newRow.find(':input').val('');
    table.find('> tbody:last').append(newRow);
}

Answer 2

这可能有效：

$('table#listings > tbody:last > tr:last input').val('')

Answer 3

您的选择器中存在一些问题...然后您使用选择器做了什么。：）

function newRow(){
   var sourceRow = $('table#listings tr').html();
   var destRow = $('<tr>'+sourceRow+'</tr>');
   destRow.find('input').val('');
   $('table#listings > tbody:last').append(destRow);
   return false;
}

我已经使它更具原子性，因此更容易阅读。

Fiddle

补充：请注意，示例中没有任何类型的“行”。

jQuery清除附加文本框

3 个答案: