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

需求描述：有两个列表，table1和table2 勾选table2中的几行数据，点击添加，能把数据添加到table1中，同时table2中的数据被删除。

吐槽撒：我屮艸芔茻，懵逼.jsp，什么鬼需求，老子不会做啊 F —  C K       all I need is U       说正经的，不会做可不行。

代码：

//html代码
<table class="table table-striped table-bordered table-hover table-checkable order-column" id="table1">
    <thead>
      <tr>
        //表头就省了啊 
      </tr>
    </thead>
    <tbody id="table1Body">
    <tr th:each="proded : ${listed}" th:id="${proded.productId}" data-save="0">
        <td>
            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline" name="lb">
                <input type="checkbox" class="checkboxes" th:value="${proded.productId}" name="checkedIds" />
            </label>
        </td>
        <td th:text="${proded.productName}"></td>
        <td th:text="${proded.productCode}"></td>
        <td th:text="${proded.productStatus}"></td>
        <td th:text="${proded.serveCount}"></td>
        <td th:text="${proded.serveForm}"></td>
        <td th:text="${proded.sellPrice}"></td>
        <td th:text="${proded.createDate}"></td>
    </tr>
    </tbody>
</table>

<table class="table table-striped table-bordered table-hover table-checkable order-column" id="table2">
    <thead>
      <tr>
       //省略表头
      </tr>
    </thead>
    <tbody id="table2Body">
    <tr th:each="prod : ${listAll}" th:id="${prod.productId}" data-save="0">
        <td>
            <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline" name="lb">
                <input type="checkbox" class="checkboxes" th:value="${prod.productId}" name="checkedIds" />
                <span></span>
            </label>
            <!--<span style="color: red" hidden="hidden" name="select">已选</span>-->
        </td>
        <td th:text="${prod.productName}"></td>
        <td th:text="${prod.productCode}"></td>
        <td th:text="${prod.productStatus}"></td>
        <td th:text="${prod.serveCount}"></td>
        <td th:text="${prod.serveForm}"></td>       
        <td th:text="${prod.sellPrice}"></td>
        <td th:text="${prod.createDate}"></td>
    </tr>
    </tbody>
</table>

//js代码
$("#toAdd").click("click",function () {
    // 1.遍历dataTable，获取每页中ck的选中状态，添加行标记为保存
    // 2.tb1添加相应行
    var nodes = $('#table2').DataTable().rows().nodes();
    for (var i = 0; i < nodes.length; i++) {
        var active = $(nodes[i]).hasClass('active');
        if (active) {
            var nowRow = $(nodes[i]);
            var trId = nowRow.attr("id");
            var tr = $('#table2').DataTable().row(i).data();//获取table2的数据
            var tb1 = $('#table1').DataTable();
            var tr0 = "<label class=\"mt-checkbox mt-checkbox-single mt-checkbox-outline\">" +
                "<input type=\"checkbox\" class=\"checkboxes\" value=" + trId + " name=\"prodId\" />" +
                "<span></span>" +
                "</label>";
            tb1.row.add({
                "DT_RowId": trId,
                "0": tr0,
                "1": tr[1],
                "2": tr[2],
                "3": tr[3],
                "4": tr[4],
                "5": tr[5],
                "6": tr[6],
                "7": tr[7]
            }).draw();
        }
    }
　　 //从table2中删除已添加到table1的行数据
    for (var i = 0; i < nodes.length; i++) {
        var active = $(nodes[i]).hasClass('active');
        if (active) {
            var nowRow = $(nodes[i]);
            var trId = nowRow.attr("id");
            $('#table2').DataTable().row('#' + trId).remove().draw();
        }
    }
});

总结：通过datatable的dom操作，来完成对同一个页面的的两张表的table做数据的添加和删除，真心觉得dom操作很牛X 也希望自己对datatable dom操作有更深更全的认识

转载于:https://www.cnblogs.com/xuchao0506/p/9767668.html