如何使用 jquery 删除从动态数据表创建的 table 某些 table 行？

Question

我有这段代码，当用户单击 datable 中的复选框时，它会在另一个 TABLE

中附加某些行

    $('#warehouseT tbody').on('click', 'input[type="checkbox"]', function (e) {
                    var check = this.checked;
                    console.log(check);
                    if (check === true) {
                        document.getElementById("order").style.visibility = 'visible';
                    var productName = $(this).closest("tr").find(".productName").text();
                    var color = $(this).closest("tr").find(".color").text();
                    var size = $(this).closest("tr").find(".size").text();
                    var Qty = $(this).closest("tr").find(".Qty").text();
                    $('#data').append('<tr>\n\
                                      <td><input type="text" name="productName" value="' + productName + '"/></td>\n\
                                      <td><input type="text" name="" value="' + color + '"/></td>\n\
                                      <td><input type="text" name="" value="' + size + '"/></td>\n\n\
                                      <td><input type="text" name="" value="' + Qty + '"/></td>\n\n\
                                      <td><input type="number" name="" value="0"/></td>\n\
                                    </tr>');}else{
//missing codes
}
                });

目前正在运行。它正在将行附加到另一个 table

<div id="order" style=" width:60%; visibility: hidden">
                <h2>Replenishment Request</h2><br/>
                <table id="data" class="table table-bordered" >
                    <thead>
                        <tr>

                            <th>Product Name</th>
                            <th>Color</th>
                            <th>Size</th>
                            <th>Current Quantity</th>
                            <th>Quantity To Be send (?)</th>
                        </tr>
                    </thead>
                    <tbody id="info">

                    </tbody>
                </table>
            </div>

问题是当用户再次点击复选框时，它应该删除 ANOTHER TABLE 中的行。

带复选框的数据表

另一个 TABLE

Answer 1

我已经把你的 if/else 改成了：

var index;
if (check === true) {
    document.getElementById("order").style.visibility = 'visible';
    index = $(this).closest("tr").index();
    var productName = $(this).closest("tr").find(".productName").text();
    var color = $(this).closest("tr").find(".color").text();
    var size = $(this).closest("tr").find(".size").text();
    var Qty = $(this).closest("tr").find(".Qty").text();
    $('#data').append('<tr id="rowNum'+index+'">\n\
                                      <td><input type="text" name="productName" value="' + productName + '"/></td>\n\
                                      <td><input type="text" name="" value="' + color + '"/></td>\n\
                                      <td><input type="text" name="" value="' + size + '"/></td>\n\n\
                                      <td><input type="text" name="" value="' + Qty + '"/></td>\n\n\
                                      <td><input type="number" name="" value="0"/></td>\n\
                                    </tr>');
} else {
    $("#rowNum"+index).remove();
}

我通过分配一个唯一的 ID 使每个附加行都是唯一的。然后就可以玩了！

Answer 2

您可以使用类和 ID 来发挥您的优势。您还可以使用 .clone() 附加行并使用 .closest() 和 .find()

在 DOM 树中导航

$(document).ready(function() {
 $('input[type="checkbox"]').on('change', function() {
        var newClass = $(this).closest('tr').attr('id');
     if ($(this).is(':checked')) {            
         var newItem = $(this).closest('tr').clone(true).attr('id', '').addClass(newClass);
            newItem.find('td:first').remove();
            $('.table2').append(newItem);
        }
        else {
         $('.table2').find('.' + newClass).remove();
        }
    });
});

td {
    text-align: center;
    padding: 5px;
    border: 1px solid black;
}
table {
    display: inline-block;
    vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tablesDiv">
    <table class="table1">
        <tr>
            <td>checked</td>
            <td>column 1</td>
            <td>column 2</td>
        </tr>
        <tr id="row1">
            <td><input type="checkbox"/></td>
            <td>something 1</td>
            <td>something else 1</td>
        </tr>
        <tr id="row2">
            <td><input type="checkbox"/></td>
            <td>something 2</td>
            <td>something else 2</td>
        </tr>
        <tr id="row3">
            <td><input type="checkbox"/></td>
            <td>something 3</td>
            <td>something else 3</td>
        </tr>
    </table>

    <table class="table2">
        <tr>
            <td>column 1</td>
            <td>column 2</td>
        </tr>
    </table>
</div>

Answer 3

编辑了@void 给出的代码

$('#warehouseT tbody').on('click', 'input[type="checkbox"]', function (e) {
                    var check = this.checked;
                    console.log(check);
                    var index = $(this).closest("tr").index();
                    if (check === true) {
                        document.getElementById("order").style.visibility = 'visible';
                        var productName = $(this).closest("tr").find(".productName").text();
                        var color = $(this).closest("tr").find(".color").text();
                        var size = $(this).closest("tr").find(".size").text();
                        var Qty = $(this).closest("tr").find(".Qty").text();
                        $('#data').append('<tr id="rowNum'+index+'">\n\
                                      <td><input type="text" name="productName" value="' + productName + '"/></td>\n\
                                      <td><input type="text" name="" value="' + color + '"/></td>\n\
                                      <td><input type="text" name="" value="' + size + '"/></td>\n\n\
                                      <td><input type="text" name="" value="' + Qty + '"/></td>\n\n\
                                      <td><input type="number" name="" value="0"/></td>\n\
                                    </tr>');
                    } else {
                     //   var index =   document.getElementById($('#data').find('[id="rowNum\[\]"]')).value;
                        //var index = $('#data').closest("tr").index();
                        $('#data').find("#rowNum" + index).remove();
                        console.log("#rowNum" + index);
                    }
                });

如何使用 jquery 删除从动态数据表创建的 table 某些 table 行？

How to delete table certain table row created from dynamic dataTables using jquery?

jquery

html-table

dynamic

datatables