如何从通过 foreach 填充的表中删除一行 - jquery

Question

我正在使用 foreach 填充表数据。

我正在使用 tr 长度来计算通过 foreach 结果产生的总行数。 一旦我得到长度，我就会通过增加值来追加一个新行

我将 foreach 结果的索引添加到 id 以便元素在填充时具有 id

@foreach ($products as $index => $items)
    <tr id="addr{{$index}}">
@endforeach

问题一：

当我尝试递增时，该值被 1 跳过。

我仍然可以添加新行。

问题 2：

我无法删除通过 foreach 填充的行

 $(function (){ var inc = $('#tab_logic tbody tr').length; // var inc = i; console.log("first" + inc); $("#add_row_edit").on("click", function (e) { e.preventDefault; $("#tab_logic").append('<tr id="addr' + (inc + 1) + '"></tr>'); $("#addr" + (inc + 1)).html($("#addr0").html()); inc++ console.log("second" + inc); // $trNew.find(':input[disabled]').prop('disabled', false); // $trNew.find(':input').val(''); }); $("#delete_row_edit").click(function () { // console.log("third" + inc); if (inc > 1) { $("#addr" + (inc)).remove(); inc--; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tab_logic" id="tab_logic"> <thead class="orange "> <tr> <th> Product Name </th> <th> HSN Code </th> <th class="center"> GST </th> <th> Quantity </th> <th> Rate(per Nos) </th> <th> Amount </th> </tr> </thead> <tbody id="tab_logic_body"> <tr id="addr0"> <td> <input type="text" class="product_name autocomplete" placeholder="" value="Full Product Name" disabled=""> <input type="hidden" name="product_id[]" value="2" class="product_id"> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="hsn_code autocomplete" placeholder="" value="HSN24"> <input type="hidden" name="hsn_code_id[]" class="hsn_code_id" value="6"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="24"> <input type="hidden" class="gst_price" value="24"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="quantity[]" placeholder="Enter Qty" class="form-control qty" step="0" min="0" value="1"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="product_price[]" placeholder="Enter Price" class="form-control product_price" step="0" min="0" value="100"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="row_total_amount[]" placeholder="Total Amount" class="form-control row_total_amount" step="0" min="0" readonly="readonly" value="118"> </div> </div> </div> </td> </tr> <tr id="addr1"> <td> <input type="text" class="product_name autocomplete" placeholder="" value="Product Name Exclusive" disabled=""> <input type="hidden" name="product_id[]" value="1" class="product_id"> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="hsn_code autocomplete" placeholder="" value="HSN18"> <input type="hidden" name="hsn_code_id[]" class="hsn_code_id" value="5"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18"> <input type="hidden" class="gst_price" value="18"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="quantity[]" placeholder="Enter Qty" class="form-control qty" step="0" min="0" value="1"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="product_price[]" placeholder="Enter Price" class="form-control product_price" step="0" min="0" value="100"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="row_total_amount[]" placeholder="Total Amount" class="form-control row_total_amount" step="0" min="0" readonly="readonly" value="118"> </div> </div> </div> </td> </tr> </tbody> </table> <table> <thead> <tr> <th> <th class="right"> <button type="button" class="btn z-depth-1" id="add_row_edit"><i class="material-icons">add_box</i> </button> <button type="button" class="btn z-depth-1 red" id="delete_row_edit"><i class="material-icons">remove</i> </button> </th> </th> </tr> </thead> </table>

附上截图

Answer 1

总记得

数组从索引 0 开始

所以当你有像var a = [1,2,3]这样的数组时。 它将在 0,1,2 索引上有数据，数组长度为 3。

您在代码中误解了这一点

当您在数组上添加数据时，请始终使用.length而不是.length + 1 。 您在添加时使用了.length + 1 。

并且在删除时始终使用.length - 1 。 您使用了.length我已经编辑了您的代码

 $(function() { // var inc = i; $("#add_row_edit").on("click", function(e) { e.preventDefault; var inc = $('#tab_logic tbody tr').length; $("#tab_logic").append('<tr id="addr' + (inc) + '"></tr>'); $("#addr" + (inc)).html($("#addr0").html()); inc++ console.log("second" + inc); // $trNew.find(':input[disabled]').prop('disabled', false); // $trNew.find(':input').val(''); }); $("#delete_row_edit").click(function() { // console.log("third" + inc); var inc = $('#tab_logic tbody tr').length; if (inc > 1) { $("#addr" + ($('#tab_logic tbody tr').length - 1)).remove(); inc--; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table class="tab_logic" id="tab_logic"> <thead class="orange "> <tr> <th> Product Name </th> <th> HSN Code </th> <th class="center"> GST </th> <th> Quantity </th> <th> Rate(per Nos) </th> <th> Amount </th> </tr> </thead> <tbody id="tab_logic_body"> <tr id="addr0"> <td> <input type="text" class="product_name autocomplete" placeholder="" value="Full Product Name" disabled=""> <input type="hidden" name="product_id[]" value="2" class="product_id"> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="hsn_code autocomplete" placeholder="" value="HSN24"> <input type="hidden" name="hsn_code_id[]" class="hsn_code_id" value="6"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="24"> <input type="hidden" class="gst_price" value="24"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="quantity[]" placeholder="Enter Qty" class="form-control qty" step="0" min="0" value="1"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="product_price[]" placeholder="Enter Price" class="form-control product_price" step="0" min="0" value="100"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="row_total_amount[]" placeholder="Total Amount" class="form-control row_total_amount" step="0" min="0" readonly="readonly" value="118"> </div> </div> </div> </td> </tr> <tr id="addr1"> <td> <input type="text" class="product_name autocomplete" placeholder="" value="Product Name Exclusive" disabled=""> <input type="hidden" name="product_id[]" value="1" class="product_id"> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="hsn_code autocomplete" placeholder="" value="HSN18"> <input type="hidden" name="hsn_code_id[]" class="hsn_code_id" value="5"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="text" class="gst autocomplete" placeholder="GST" name="gst[]" readonly="readonly" value="18"> <input type="hidden" class="gst_price" value="18"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="quantity[]" placeholder="Enter Qty" class="form-control qty" step="0" min="0" value="1"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="product_price[]" placeholder="Enter Price" class="form-control product_price" step="0" min="0" value="100"> </div> </div> </div> </td> <td> <div class="col s12"> <div class="row"> <div class="input-field col s12"> <input type="number" name="row_total_amount[]" placeholder="Total Amount" class="form-control row_total_amount" step="0" min="0" readonly="readonly" value="118"> </div> </div> </div> </td> </tr> </tbody> </table> <table> <thead> <tr> <th> <th class="right"> <button type="button" class="btn z-depth-1" id="add_row_edit"><i class="material-icons">add_box</i> </button> <button type="button" class="btn z-depth-1 red" id="delete_row_edit"><i class="material-icons">remove</i> </button> </th> </th> </tr> </thead> </table>

Answer 2

使用 jquery 删除行

$(document).on("click", "a.deleteRow", function () {
        $(this).closest("td").parent("tr").remove();
        calc_total();
        serialNumber();
    });