javascript - How can I clone a table row using jQuery?

Question

I want to clone my tr class row. So when the user is clicking at a button, the row will clone and will set below the last row.

I currently use the following code, only it will not work properly. I probably not be correct.

JS:

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

The cloned field looks like this:

HTML markup:

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>';

I think that the first snippet of code at the javascript is not correctly.

Answer 1

If the button is inside the row you want to clone, then something like the following should work. (It may not be exactly right, but it's probably close).

$('#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));
});

I appended the row wrapped in a new <tbody> element because Internet Explorer may have problems appending a <tr> to an existing table body.

The code also uses made-up selectors for the table and the button; you can make your page with whatever id/class values you need.