Javascript Jquery Datatable将一行从一个表添加到另一个表

我正在尝试将表2中的行添加到表1中

如果我在复选框列中选择该行并按add user，将在表1中添加该行

在“添加用户”按钮旁边，如果我在“输入”菜单中单击“全选”按钮，我可以选择“全选”或“无”

按下“添加用户”按钮后，表2中的所有行将添加到表1中

如果选择“无”，请清除所有复选框

如果单击全部，请选中所有复选框

jsfiddle：

html:

---

我稍微修改了你的代码。此示例似乎适合您的任务和要求。希望它能帮助你

Html:

---

jsFIDLE:？

这里没有问题，请您编辑您的问题，也许只提供与问题相关的代码，没有问题？？？非常感谢，还有两件事，在我将用户从表2添加到表1后，是否可以从表2中消失？现在用户在添加到另一个表后仍然在那里，明白吗？另一件事是：你能帮我吗？我给100分也是为了找到解决办法：谢谢，不客气！好的，我以后再看这个问题。关于第一个问题，请尝试以下链接：酷，我接受了你的答案，但我可以在4小时内给你奖金：），你认为你能在其他问题上提供帮助吗？谢谢你救了我一个星期谢谢你！是的，我会尽力帮你：）

<br>
<br>
<h1>
 table1
</h1><br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>Order</th>
    </tr>
  </thead>
</table>

<br>
<br>
<h1>
 table 2
</h1><br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>checkbox</th>
    </tr>
  </thead>
</table>


<div class="col-md-12">
  <div class="col-md-6">
    <button type="button" class="btn btn-success">Add a user</button>
  </div>
  <div class="col-md-6">select all or none
    <div class="btn-group">
      <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <input type="checkbox" name="vehicle1" value="Bike">
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </div>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">All</a></li>
        <li><a href="#">None</a></li>
      </ul>
    </div>
  </div>
</div>

$(document).ready(function() {
  var dt = $('#example').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
  var table = $('#example').DataTable({
    ajax: url,
    createdRow: function(row, data, dataIndex) {
      $(row).attr('id', 'row-' + dataIndex);
    },
    rowReorder: {
      dataSrc: 'order',
    },
    columns: [{
      data: 'order'
    }, {
      data: 'name'
    }, {
      data: 'place'
    }]
  });
  table.rowReordering();

});


$(document).ready(function() {
  var dt = $('#example2').dataTable();
  dt.fnDestroy();
});

$(document).ready(function() {
  var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
  var table = $('#example2').DataTable({
    ajax: url,
    createdRow: function(row, data, dataIndex) {
      $(row).attr('id', 'row-' + dataIndex);
    },
    rowReorder: {
      dataSrc: 'order',
    },
    columns: [{
      data: 'order'
    }, {
      data: 'name'
    }, {
      data: 'checkbox'
    }]
  });
  table.rowReordering();

});

$(document).ready(function() {
  $('body').on('mouseenter', 'input', function() {
    $('.btn').prop('disabled', true);
  });
  $('body').on('mouseout', 'input', function() {
    $('.btn').prop('disabled', false);
  });
});

<br>
<br>
<h1>
    table1
</h1>
<br>
<br>
<table id="example" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>Order</th>
    </tr>
  </thead>
</table>

<br>
<br>
<h1>
    table 2
</h1>
<br>
<br>
<table id="example2" class="display" width="100%" cellspacing="0">
  <thead>
    <tr>
      <th>First name</th>
      <th>Place</th>
      <th>checkbox</th>
    </tr>
  </thead>
</table>


<div class="col-md-12">
  <div class="col-md-6">
    <button type="button" class="btn btn-success" id="btnAddUser">Add a user</button>
  </div>
  <div class="col-md-6">select all or none
    <div class="btn-group">
      <div class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        <input type="checkbox" name="vehicle1" value="Bike">
        <i class="fa fa-caret-down" aria-hidden="true"></i>
      </div>
      <ul class="dropdown-menu" role="menu">
        <li><a id="checkAll">All</a></li>
        <li><a id="uncheckAll">None</a></li>
      </ul>
    </div>
  </div>
</div>

function addUser()
{               
    var $source = $("#example2").DataTable();           
    var names = $($source.rows().nodes())
        .filter(':has(:checked)')
        .map(function () {
            return $(this).children().first().text();                   
        }).toArray();

    var $rows = $source.rows(function (i, data) {
        return names.indexOf('' + data.order) != -1;
    });

    var data = $rows.data();

    if (data.length > 0)
        $("#example").DataTable().rows.add(data.toArray()).draw();
}

function checkAll(check)
{      
    var $source = $("#example2").DataTable();           
    var names = $($source.rows().nodes())
        .find('input[type="checkbox"]')
        .each(function (i, el) {
            el.checked = check == 1;
        });

        return false;
}

$(document).ready(function() {
    var dt = $('#example').dataTable();
    dt.fnDestroy();
});

$(document).ready(function() {
    var url = 'http://www.json-generator.com/api/json/get/clmDuyndua?indent=2';
    var table = $('#example').DataTable({
        ajax: url,
        createdRow: function(row, data, dataIndex) {
          $(row).attr('id', 'row-' + dataIndex);
        },
        rowReorder: {
          dataSrc: 'order',
        },
        columns: [{
          data: 'order'
        }, {
          data: 'name'
        }, {
          data: 'place'
        }]
    });
    table.rowReordering();
});


$(document).ready(function() {
    var dt = $('#example2').dataTable();
    dt.fnDestroy();
});

$(document).ready(function() {
    var url = 'http://www.json-generator.com/api/json/get/cnmZgfsBKa?indent=2';
    var table = $('#example2').DataTable({
        ajax: url,
        createdRow: function(row, data, dataIndex) {
          $(row).attr('id', 'row-' + dataIndex);
        },
        rowReorder: {
          dataSrc: 'order',
        },
        columns: [{
          data: 'order'
        }, {
          data: 'name'
        }, {
          data: 'checkbox'
        }]
      });
      table.rowReordering();
});

$(document).ready(function() {
    $('body').on('mouseenter', 'input', function() {
        $('.btn').prop('disabled', true);
    });
    $('body').on('mouseout', 'input', function() {
        $('.btn').prop('disabled', false);
    });

    $('#checkAll').click(function () { checkAll(1);});
    $('#uncheckAll').click(function () { checkAll(0);});
    $('#btnAddUser').click(function () { addUser(); });
});