我如何克隆使用jQuery表行

How can I clone a table row using jQuery?

本文关键字：jQuery 表行 何克隆      更新时间：2023-09-26

我想克隆我的tr类行。因此，当用户单击按钮时，该行将克隆并设置在最后一行的下方。

我目前使用以下代码，只是它不能正常工作。我可能不正确。

JS: 

var row = jQuery('.ui-sortable').closest('.ui-sortable').find('tbody tr.row.ui-sortable:last-child');
var clone = row.clone();

克隆的字段看起来像这样:

HTML标记:

echo '<tbody class="ui-sortable">';
echo '<tr class="row">';
echo '<td class="order">1</td>';
// Do some stuff inside the row.
echo '<td class="remove"><a class="repeatable-remove button" href="#">-</a></td>';
echo '</tr>'; // End .row
echo '</tbody>';

我认为javascript的第一个代码片段是不正确的

如果按钮位于要克隆的行内，则应该执行以下操作。(它可能不完全正确，但可能很接近)。

$('#your-table').on('click', '.copy-row-button', function() {
  var 
    $table = $(this).closest('table'),
    $row = $(this).closest('tr'),
    $newRow = $row.clone();
  $table.append($('<tbody/').append($newRow));
});

我添加了一个新的<tbody>元素包装的行，因为Internet Explorer可能会在向现有表体添加<tr>时出现问题。

代码还为表和按钮使用了自制的选择器;你可以用你需要的任何id/class值来创建你的页面。

相关文章：