我正在使用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>
附屏幕截图
总是记住
数组从索引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>