Question

我发现了如何用这个jQuery代码删除一行。点击带有删除类和垃圾图标的td。

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

但我没有找到任何关于重复行的信息。我只想点击一个带有另一个图标的td，下面会重复该行。

Answer 1

要复制行，您需要将其所有数据复制到数组中，然后调用row.add()将此数据作为新行插入。

类似的东西：

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

要获取对DataTable的引用，请将DataTable()方法的结果分配给var。

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

如果您使用jQuery而不是像row.add()这样的DataTables方法追加一行，那么当您对表格进行排序或分页时，您将丢失该行。

Answer 2

试试这个：

<强> 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);
    } );

Answer 3

这是jQuery，在它下面添加一个行副本，其中涉及DataTables。需要注意的是，此方法可能不会保留用户设置的任何排序或过滤。

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

});

希望这有帮助。

如何在DataTables（jQuery DataTables插件）中复制一行？

3 个答案: