Question

我想尝试新的东西，

如果我们选择行表，然后通过选择元素来复制它吗？

.ex ：当我选择行表并想要复制它时，请使用“点击所选文件夹”方法复制它。

就像我们使用函数一样：

如果用户选择ID #folder1，请将行复制到ID #table1

如果用户选择ID #folder2，请将行复制到ID #table2

我以前的复制行代码，我想更改它：

因为这只是通过搜索表格来复制

Try This JSFiddle Demo

$('#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 {
        // do nothing..
      }
    });
  });
}); // 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);
    }
  });
}

如果我们看到JSFiddle，我想要的例子，

删除“复制行”按钮，然后单击“通过单击表名复制[表2，表3]”。

我需要参考来创建这个功能。

我希望您理解，我们将非常感谢任何帮助

Answer 1

正如您所说，当我们点击带有标签<h>或TABLE2的标题TABLE3而不是点击按钮时，您希望将所选行复制到相应的表格。如果您希望它如何工作，请参阅下文？

// Code goes here
$(document).ready(function() {
  /*********** mainTable ***************/
  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 

  /*********** SecondTable ***************/
  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

  /*********** ThirdTable ***************/
  var ThirdTable = $('#table3').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"

  }); // ThirdTable

  /*************** SelecT OPTION ****************/

  mainTable.on('click', 'tbody tr', function() {
    $(this).toggleClass('selected');
  });

  $('#copyToTable2,#copyToTable3').on('click', function() {

    let $elem = $(this);
    var table = $("#table" + $elem.attr('id').replace(/[a-zA-Z]/ig, ''));
    var tbl_id = table.attr('id');

    var $row = mainTable.find(".selected");
    if (!$row.length) {
      console.log('You must select some rows to copy first');
      return;
    } else {
      var r = confirm("Copy to table " + tbl_id + "?");
      var table_to_copy = table.dataTable();
      if (r == true) {
        copyRows(mainTable, table_to_copy);
        console.log("Copied!");
        setTimeout('console.clear()', 2000);
      } else {
        // do nothing..
      }

    }

  });
}); // 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);
    }
  });
}

/* Styles go here */

#table2_wrapper {
  margin-top: 50px;
  margin-left: 50px;
}

#table1_wrapper {
  margin-left: 50px;
}

table.dataTable tbody tr.selected {
  background-color: #b0bed9;
}

table.dataTable.display tbody tr.odd.selected>.sorting_1,
table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1 {
  background-color: #a6b3cd;
}

table.dataTable.display tbody tr:hover.selected>.sorting_1,
table.dataTable.display tbody tr.odd:hover.selected>.sorting_1,
table.dataTable.display tbody tr.even:hover.selected>.sorting_1,
table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover.selected>.sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover.selected>.sorting_1 {
  background-color: #a1aec7;
}

#Copy {
  background: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css" rel="stylesheet" />
<link href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css" rel="stylesheet" />
<div class="allTable">
  <div>
    <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>
  <div>
    <br>
    <br>

    <h2 id="copyToTable2">TABLE 2</h2>
    <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>
  <h2 id="copyToTable3">TABLE 3</h2>
  <div>
    <table id="table3" 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>
</div>

Answer 2

所以你到目前为止所做的是运行你的＆＃34;查找表＆＃34;每次有人点击复制按钮时都会运行。

var tables = $(".allTable").find("table*[id]").not("#table1");
// ...
var tbl_id = this.id; //this is one of the tables of the upper set
var r = confirm("Copy to table " + tbl_id + "?");

此逻辑已找到您的所有表格。因此，每次用户单击复制按钮时，无需搜索所有表，您可以在tables集中为每个元素创建一个新按钮，而不是在页面加载开始时。然后，每个按钮都可以具有在特定表的上下文中执行的复制逻辑。

$.ready(function(){
    var tables = $(".allTable").find("table*[id]").not("#table1");
    tables.each(function(){
        var currentTable = $(this),
            tbl_id = currentTable.attr('id'),
            newButton = $('<button type="button">Copy to table ' + tbl_id + '</button>');
        $('#Copy').parent().append(newButton);
        newButton.click(function(){
            var r = confirm("Copy to table " + tbl_id + "?");
            //Copy the rows to the currentTable variable
        });
    });
});

应该是开发解决方案的良好开端。

此外，由于您需要删除通用#copy按钮，您需要找到另一个逻辑来获取复制按钮的包装。

jQuery - 使用方法select元素可能的复制行表？

2 个答案: