I found out how to delete a row with this jQuery code. While clicking on a td with the class delete and a garbage icon.

HTML

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td><img src=""></td>
    </tr>
</tbody>

JAVASCRIPT

$('#foo tbody').on( 'click', 'tr .delete', function () {
        $(this).closest('tr').fadeOut("slow", function(){
            $(this).remove();
        })
    } );

But I did not find anything about duplicating rows. I just want to click on a td with another icon in it and the row is duplicated below.

I found out how to delete a row with this jQuery code. While clicking on a td with the class delete and a garbage icon.

HTML

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>

JAVASCRIPT

$('#foo tbody').on( 'click', 'tr .delete', function () {
        $(this).closest('tr').fadeOut("slow", function(){
            $(this).remove();
        })
    } );

But I did not find anything about duplicating rows. I just want to click on a td with another icon in it and the row is duplicated below.

• javascript
• jquery
• datatables

Share Improve this question Follow edited Mar 18, 2016 at 14:21 twernt 20.6k55 gold badges3434 silver badges4141 bronze badges asked Mar 18, 2016 at 13:48 151RUM151RUM 7511 gold badge11 silver badge88 bronze badges 6

• what do you want to remove exactly? – Bikee Commented Mar 18, 2016 at 14:00
• Hi, i dont want to remove anything. I already can remove rows. I want to DUPLICATE rows when i click on a, for example <td> field. – 151RUM Commented Mar 18, 2016 at 14:04
• Do you want to delete a row or duplicate a row? – twernt Commented Mar 18, 2016 at 14:04
• something like this should work $('#foo tbody').on( 'click', 'tr .duplicate', function () { $(this).closest('tr').fadeIn("slow", function(){ $(this).clone().appendTo($( this) ) }) } ); – Badr Commented Mar 18, 2016 at 14:08
• @twernt, i want to duplicate a row.. delete is already working :) – 151RUM Commented Mar 18, 2016 at 14:11

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

To duplicate a row, you'll need to copy all of its data into an array, then call row.add() to insert this data as a new row.

Something like:

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td class="copy">IMAGE src here</td>
      <td><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>

$('#foo tbody').on( 'click', 'tr .copy', function () {
  var row_data = [];
  $(this).closest('tr').find('td').each(function() {
    row_data.push($(this).text());
  });
  // you'll need a reference to your DataTable here
  table.row.add(row_data).draw();
});

To get a reference to your DataTable, assign the result of the DataTable() method to a var.

$(document).ready(function() { 
  var table = $('#foo).DataTable( { "paging": false, "info": false }); 
  // set up your event handlers, etc. 
});

If you append a row with jQuery instead of DataTables method like row.add(), you'll lose the row when you sort or page the table.

Here's the jQuery that adds a row duplicate right underneath it, where DataTables is concerned. It has a caveat that this method may not retain any sorting or filtering set by the user.

$('#formtable tbody').on( 'click', 'button.btn-success', function () {
    //destroy instance of DataTables    
    table.destroy(false);

    //script assumes button is clicked on the line that needs to be duplicated
    var btn = this;

    //copy and insert row right below the original
    var line = $(btn).parents('tr');
    line.after(line.clone());

    //since clone retains only input field values, but not dropdown selections,
    //each dropdown value must be assigned individually
    line.next().find("select.shape").val(line.find("select.shape").val());
    line.next().find("select.material").val(line.find("select.material").val());
    line.next().find("select.supplied").val(line.find("select.supplied").val());

    //re-creating DataTables instance 
    //notice that "table" has no "var" in front - that's because it is pre-defined.
    table = $('#formtable').DataTable({
        "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": "_all"
        } ],
        "paging":   false,
        "info": false,
        "ordering": true,
        "searching": false,
        "rowReorder": true
    }); 
    //"Index Column" values re-calculation
    table.column(0).nodes().each( function (cell, i) {
        cell.innerHTML = i+1;
    });

});

Hope this helps.

Try this:

HTML

<table id="foo" class="display" cellspacing="0" width="100%">
<tbody>
      <tr>
      <td>Foo1</td>
      <td>Foo2</td>
      <td>Foo3</td>
      <td class="delete">IMAGE src here</td>
      <td class="duplicate"><img src="http://placehold.it/20x20"></td>
    </tr>
</tbody>
</table>

SCRIPT

$('#foo tbody').on( 'click', 'tr .delete', function () {
        $(this).closest('tr').fadeOut("slow", function(){
            $(this).remove();
        })
    } );

$('#foo tbody').on( 'click', 'tr .duplicate', function () {
        var myTr = $(this).closest('tr');
        var clone = myTr.clone();
        myTr.after(clone);
    } );