Question

我创建了 dataTable副本行。

mainTable只能复制到secondTable。

问题在于添加新表，

＆安培;

我希望 mainTable 行可以复制到新表中。

我已经创建了“Create New Table”按钮

新表将附加到父div [{1}}

中

MY JSFiddle

参考：

我想将复制行放入选定的表（secondTable / newTable）。不是多重的。我不知道如何添加所选按钮，因为我正在使用变量。



我有表格/子项allTable的父div class="allTable"，   mainTable和新表）。



我从secondTable到另一个表的复制行表有“复制行”，但现在只能复制到mainTable。



在secondTable中，   我为$(document).ready(function())和mainTable创建了dataTable。



secondTable ID为＃table1



mainTable ID为＃table2



新表ID为#newTable + index（newTable（3））



新表格将显示空白数据。

SCREENSHOT：

我真的希望得到你的帮助。

Answer 1

这有效，但你可以改进它，我希望你能从这里得到这个想法，这不是按预期完全正常工作，但流程可能对你有帮助。

https://jsfiddle.net/o6ysgzps/26/我更新了小提琴，

正如您所看到的，我收集了创建的表的列表，并使用确认框循环到每个表，以选择要将其复制到哪个表。您可以使用bootstrap模式和jquery确认来制作它更好，

你可以让它变得更干净，

HTML

 <body>
    <select id='cboList' style=''></select>
      <div class="allTable">

        <div class="one" style="padding-bottom:50px">
          <h2>TABLE 1</h2>
          <table id="table1" class="table table-bordered table-hover">
            <thead>
              <tr>
                <th></th>
                <th>Audience Name</th>
                <th>Type</th>
                <th>Size</th>
                <th>Date Created</th>
              </tr>
            </thead>
          </table>
        </div>


        <br>
        <button id="Copy">COPY ROW &raquo;</button>
        <!-- <button id="LeftMove" style="float:left;">&laquo; left</button> -->
        <br>

        <h2>TABLE 2</h2>
        <div class="two">
          <table id="table2" class="table table-bordered table-hover">
            <thead>
              <tr>
                <th></th>
                <th>Audience Name</th>
                <th>Type</th>
                <th>Size</th>
                <th>Date Created</th>
              </tr>
            </thead>
          </table>
        </div>

        <br>
        <br>
        <br>

        <input type="button" class="submitButton" value="Create New Table">
        <h2>NEW TABLE GOES HERE</h2>

    </div>
    </body>

这是js

$(document).ready(function() {
  var mainTable = $('#table1').dataTable({
    "ajax": "https://api.myjson.com/bins/zvujb",
    "columns": [{
      "data": "id"
    }, {
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "columnDefs": [{
      "targets": 0,
      "checkboxes": {
        "selectRow": true
      },
      "render": function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
      }
    }],
    "scrollY": "200px",

  }); // mainTable 


  var secondTable = $('#table2').dataTable({

    "columns": [{
      "data": "id"
    }, {
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "columnDefs": [{
      "targets": 0,
      "checkboxes": {
        "selectRow": true
      },

      "render": function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
      }
    }],

    "scrollY": "200px",
    "scrollCollapse": "true"

  }); // secondTable


  mainTable.on('click', 'tbody tr', function() {
    $(this).toggleClass('selected');
  });

    $('#Copy').on('click', function() {
     var tables = $(".allTable").find("table*[id]").not("#table1");
     tables.each(function(){
          console.log(this.id);
          var tbl_id = this.id; 
          var $elem = $(this);
          var r = confirm("Copy to table "+tbl_id+"?");
          var table_to_copy = $elem.dataTable();
          if (r == true) {
              copyRows(mainTable, table_to_copy);
              alert("Copied!");
          } else {

          }
      });


    //
  });


}); // end of  $(document).ready...



function copyRows(fromTable, toTable) {
  var $row = fromTable.find(".selected");
  $.each($row, function(k, v) {
    if (this !== null) {
      addRow = fromTable.fnGetData(this);
      toTable.fnAddData(addRow); // <-- Copy Row
      // fromTable.fnDeleteRow(this); <-- Move row, delete main row.
    }
  });
}

var tableIndex = 3;
$('.submitButton').click(function() {
      let addIndex = tableIndex++;
      var addTable = '<div class="newTable'+ addIndex +'">' +
        '<table id="newTable'+ addIndex +'" class="table table-bordered table-hover">' +
        '<thead>' +
        '<tr>' +
        '<th></th>' +
        '<th>Audience Name</th>' +
        '<th>Type</th>' +
        '<th>Size</th>' +
        '<th>Date Created</th>' +
        '</tr>' +
        '</thead>' +
        '</table>' +
        '</div>';

    $('.allTable').append(addTable);
    var newTable = $("#newTable"+ addIndex).dataTable({

    "columns": [{
      "data": "id"
    }, {
      "data": "name"
    }, {
      "data": "subtype"
    }, {
      "data": "approximate_count"
    }, {
      "data": "time_created"
    }],
    "columnDefs": [{
      "targets": 0,
      "checkboxes": {
        "selectRow": true
      },

      "render": function(data, type, full, meta) {
        return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
      }
    }],

    "scrollY": "200px",
    "scrollCollapse": "true"

  }); // newTable
});

Answer 2

修改您的代码如下：

function copyRows(fromTable, toTable) {
  var toTable = $("table:last").dataTable(); // add this line to the function. Then you can remove toTable from parameters

将行表复制到“新表”中。 | jQuery的

2 个答案: