1

我有一张这样的桌子：

<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 代码本身不会不需要编辑。所有帮助表示赞赏！

4

5 回答 5

2

附加行的克隆，而不是原始行本身。此外，您应该删除您的 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/

于 2013-01-10T14:53:34.097 回答
1

您要附加到行，而不是正文。你想要这样的东西：

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

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

此外，您最终会得到具有相同 id 的两行，这也不是很好。:)

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

于 2013-01-10T14:55:08.403 回答
0

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

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 问题。

于 2013-01-10T15:18:14.630 回答
0

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

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

});

于 2013-01-10T14:54:53.267 回答
0

你不应该使用 append()。有了这个，您将在父行中插入新表行。我认为您需要使用 after() 来达到您的目的。

$('#addrow').click(function(){
        $('#invrows tr:last').after($('#rowrow').clone());
});
于 2013-01-10T14:57:43.230 回答