勾选表中的行数据，点击添加，添加到另一个表中(二)

前便已经有了一，这是二，这个更完整一点 。不过这个table1没有checkbox最后有个删除图标，table2有checkbox，没有删除图标

代码：

//html代码
<div class="btn-group">
   <button class="btn sbold green" id="btnAddPackaje">
　　<span class="ladda-label">
   　　i class="fa fa-plus" aria-hidden="true"></i>添加
　　</span>
   </button>
</div>

<table class="table table-striped" id="table1">
  <thead>
    <tr>
      <th>名称</th>
      <th>编码</th>
      <th>状态</th>
      <th>数量</th>
      <th>时间</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="packaje : ${addedList}" th:id="|tb1${packaje.packajeId}|">
      <td th:text="${packaje.packajeName}"></td>
      <td th:text="${packaje.packajeCode}"></td>
      <td th:text="${packaje.packajeStatus eq '02'}? '已发布':''"></td>
      <td th:text="${packaje.productCount}"></td>
      <td th:text="${#strings.substring('__${packaje.createDate}__',0,10)}"></td>
      <td>
           <div style="display: flex; align-items: center;"><div>
                <img th:src="@{/assets-new/apps/img/shanchu.png}"
                     th:onclick="|deleteById('${packaje.packajeId}')|" title="删除"/>
           </div>
        </div>
     </td>
    </tr>
  </tbody>
</table>
<table class="table table-striped" id="table2">
    <thead>
    <tr>
        <th><label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
            <input type="checkbox" class="group-checkable" data-set="#table2 .checkboxes"/>
            <span></span>
        </label></th>
        <th>名称</th>
        <th>编码</th>
        <th>状态</th>
        <th>数量</th>
        <th>时间</th>
        <th hidden="hidden">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="packaje : ${notAddedList}" th:id="|tb2${packaje.packajeId}|">
        <td>
            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                <input type="checkbox" class="checkboxes" th:value="${packaje.packajeId}"
                       name="id"/> <span></span>
            </label>
        </td>
        <td th:text="${packaje.packajeName}"></td>
        <td th:text="${packaje.packajeCode}"></td>
        <td th:text="${packaje.packajeStatus eq '02'}? '已发布':''"></td>
        <td th:text="${packaje.productCount}"></td>
        <td th:text="${#strings.substring('__${packaje.createDate}__',0,10)}"></td>
        <td hidden="hidden">
            <div style="display: flex; align-items: center;">
                <div>
                    <img th:src="@{/assets-new/apps/img/shanchu.png}"
                         th:onclick="|deleteById('${packaje.packajeId}')|" title="删除"/>
                </div>
            </div>
        </td>
    </tr>
    </tbody>
</table>

//js代码
function addPackaje() {
    // var nodes = $('#table2').DataTable().rows(".active").nodes();
    // var datas = $('#table2').DataTable().rows(".active").data();
    var rows = $('#table2').DataTable().rows(".active");
    if (CommnUtil.notNull(rows)) {
        var tb1 = $('#table1').DataTable();
        var datas = rows.data();
        var nodes = rows.nodes();
        if (nodes.length == 0) {
            layer.msg("请选择操作项！！");
            return;
        }
        for (var i = 0; i < nodes.length; i++) {

            var node = nodes[i];
            var tr = datas[i];
            var tr2Id = $(node).attr('id'); // table2的行id
            // var packajeIndex = $(node).data('packajeIndex'); // table2的行id
            var id = tr2Id.substring(3, tr2Id.length); // table2的tr的id前缀为tb2,
            tb1.row.add({
                "DT_RowId": "tb1" + id,
                "0": tr[1],
                "1": tr[2],
                "2": tr[3],
                "3": tr[4],
                "4": tr[5],
                "5": tr[6]
            }).draw();
            $('#table2').DataTable().row(rows[i]).remove().draw();

            changePackajeIndexs(id, true);   // 将选中下标添加到input
        }
    }
    var rowCount = $("#table1").DataTable().page.info().recordsTotal;
    if (rowCount > 0) {
        $("#addedDiv").prop("hidden", false);
    }
}
//点击table1每条数据后边的删除图标，删除该条数据，tabale2添上该条数据
function deleteById(packajeId) {
    layer.confirm("确认要移除此套餐吗？", {title: "移除确认"}, function (index) {
        layer.close(index);

        var tr = $('#table1').DataTable().row("#tb1" + packajeId).data();
        var tb2 = $('#table2').DataTable();
        var tr0 = "<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">" +
            "<input type="checkbox" class="checkboxes" value=""+packajeId" +
            "name="id"/> <span></span>" +
            "</label>";
        tb2.row.add({
            "DT_RowId": "tb2" + packajeId,
            "0": tr0,
            "1": tr[0],
            "2": tr[1],
            "3": tr[2],
            "4": tr[3],
            "5": tr[4],
            "6": tr[5]
        }).draw();
        tb2.columns([6]).visible(false);//隐藏table1添加过来的删除图标按钮
        // 1.删除
        $('#table1').DataTable().row('#tb1' + packajeId).remove().draw();
        changePackajeIndexs(packajeId, false);   // table1中的数据移除

        var rowCount = $("#table1").DataTable().page.info().recordsTotal;
        if (rowCount == 0) {
            $("#addedDiv").prop("hidden", true);
        }
    });
}

function changePackajeIndexs(sedId, selected) {
    var curVal = $("#addedIds").val();
    if (selected) {//选中
        if (CommnUtil.notNull(curVal)) {
            curVal = curVal + sedId + ",";
        } else {
            curVal = sedId + ',';
        }
    } else { //取消选中
        var sedIdArr = "";
        if (curVal.startsWith(sedId)) {
            sedIdArr = curVal.split(sedId + ',');
        } else {
            sedIdArr = curVal.split(',' + sedId + ',');
        }
        if (CommnUtil.notNull(sedIdArr[0]) && CommnUtil.notNull(sedIdArr[1])) {
            curVal = sedIdArr[0] + "," + sedIdArr[1];
        } else if (CommnUtil.notNull(sedIdArr[0]) && !CommnUtil.notNull(sedIdArr[1])) {
            curVal = sedIdArr[0] + ',';
        } else if (!CommnUtil.notNull(sedIdArr[0]) && CommnUtil.notNull(sedIdArr[1])) {
            curVal = sedIdArr[1];
        } else {
            curVal = '';
        }
    }
    $("#addedIds").val(curVal);
}

总结：操作datatables  重点是在于两个表结构不太一样，table1没有checkbox最后有个删除图标，table2有checkbox，没有删除图标