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

问题描述 投票:0回答:1

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

我正在使用tr长度来计算以查找通过foreach结果产生的总行。一旦获得长度,就可以通过增加值来追加新行]

我在id中添加了foreach结果的索引,以便元素在填充时具有ID

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

问题1:

[当我尝试增加时,该值被跳过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>

附屏幕截图

enter image description here

javascript html jquery
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.