Question

我有这个代码，当用户点击数据表中的复选框时，它会在另一个表中附加某些行

    $('#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
}
                });

目前正在运作。它是在ANOTHER表中添加行

<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>

问题是，当用户再次单击该复选框时，它应该删除另一个表中的行。

带有复选框的dataTables

另一个表

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树中导航

＆＃13;

$(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();
        }
    });
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

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删除从动态dataTables创建的表格某些表行？

3 个答案: