jQuery的append不是追加而是删除

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();

});

fiddle :http://jsfiddle.net/jonathansampson/4MRx5/