Skip to content Skip to sidebar Skip to footer

How Can I Clone A Table Row Using Jquery?

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

Solution 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.

Post a Comment for "How Can I Clone A Table Row Using Jquery?"