Question

我有一张这样的表：

<table id="invrows">
    <tbody>
        <tr id="rowrow">
            <td><input type="text" id="idef" name="idef[]" class="required"></td>
            <td><input type="text" id="iprice" name="iprice[]" class="required"></td>
            <td><input type="text" id="ivat" name="ivat[]" class="required"></td>
            <td><div id="addrow">Add One More</div></td>
        </tr>
    </tbody>
</table>

每次点击“addrow”div时，想要向表中添加一个新行。所以这是我的jQuery代码：

$('#addrow').click(function(){
        $('#invrows tr:last').append($('#rowrow'));
});

然而，不是添加一个新的'#rowrow'行（听起来很荒谬，我知道），它只删除了这一行，从而留下了一个空表。我尝试将行的HTML代码添加到.append（），这很好用，但我希望它能够与DOM元素一起使用，这样当原始行发生更改时，什么都不会被破坏，jQuery代码本身也不会不需要编辑。所有帮助表示赞赏！

Answer 1

附加行的克隆，而不是原始行本身。此外，您应该删除您的id值，以便不在克隆元素上复制它：

// Use event-delegation since we'll have many rows
$("#invrows").on("click", ".addrow", function (e) {

  // Clone row
  var clone = $(this).closest("tr").clone();

  // Append to table, clear inputs
  clone.appendTo(e.delegateTarget).find(":input").val('');

  // Remove add button from original row
  $(this).closest("td").remove();

});

小提琴：http://jsfiddle.net/jonathansampson/4MRx5/

Answer 2

你附加到行，而不是身体。你想要这样的东西：

$('#addrow').click(function(){
        $('#invrows tbody').append($('#rowrow').clone());
});

哦，正如其他人所说，要么克隆元素，要么直接获取html。（编辑的代码反映了这一点）。

另外，你最终会得到两个具有相同id的行，这也不是很好。：）

还有一件事，看看.clone()的文档看起来它实际上是必需的，否则jquery只会移动实际的元素。参见那里的例子。

Answer 3

你要做的是追加rowrow的html内容，所以试试：

$('#addrow').click(function(){
    $('#invrows tr:last').append($('#rowrow').html());

}）;

Answer 4

你不应该使用append（）。有了这个，你将在父表中插入ne表行。我认为您需要使用after（）作为您的目的。

$('#addrow').click(function(){
        $('#invrows tr:last').after($('#rowrow').clone());
});

Answer 5

创建一个返回新行的函数供您追加。

function newRow (table) {
    var html = '<tr id="rowrow' + (table.tBodies[0].rows.length + 1) + '">' +
        '<td><input type="text" id="idef" name="idef[]" class="required"></td>' +
        '<td><input type="text" id="iprice" name="iprice[]" class="required"></td>' +
        '<td><input type="text" id="ivat" name="ivat[]" class="required"></td>' +
        '<td><div id="addrow">Add One More</div></td>' +
    '</tr>';
    $(table.tBodies[0]).append(html);
}

这里正在使用：

var $table = $('#invrows');
$('#addrow').click(function(){
    $table.append(newRow($table[0]));
});

现在，如果您需要修改结构，只需在newRow函数中执行。您也可以使用模板引擎。

请注意，您的所有输入和addRow div仍然存在重复的ID问题。

jQuery追加不附加但删除

5 个答案: