[英]Dropdown data-attributes to populate into input fields on dynamically added rows
**This is the code i currently come up with I wanted to populate price and tax files from data- attributes ** **这是我目前想出的代码,我想从数据属性中填充价格和税收文件**
<table class="table g-5 gs-0 mb-0 fw-bolder text-gray-700" id="tab_logic">
<!--begin::Table head-->
<thead>
<tr class="border-bottom fs-7 fw-bolder text-gray-700 text-uppercase">
<th class="min-w-50px w-50px">#</th>
<th class="min-w-300px w-475px">Item</th>
<th class="min-w-100px w-100px">QTY</th>
<th class="min-w-100px w-100px">Price</th>
<th class="min-w-100px w-100px">Tax</th>
<th class="min-w-100px w-100px text-end">Total</th>
<th class="min-w-75px w-75px text-end">Action</th>
</tr>
</thead>
<!--end::Table head-->
<!--begin::Table body-->
<tbody>
<tr class="border-bottom border-bottom-dashed" id='addr1'>
<td class="pt-8 text-nowrap rowid" >1</td>
<td class="pe-7">
<select class="form-control form-control-solid itemname" name="itemname[]">
@foreach($items as $item)
<option data-rate="{{$item->item_price }}" data-tax="{{$item->item_tax }}">{{$item->item_name}}</option>
@endforeach
</select>
</td>
<td class="ps-0"><input type="number" class="form-control form-control-solid qty" min="1" name="quantity[]" placeholder="0" /></td>
<td><input type="number" class="form-control form-control-solid price" name="price[]" min="1" placeholder="0.00" /></td>
<td><input type="number" class="form-control form-control-solid text-end tax" name="tax[]" min="0" placeholder="0.00" /></td>
<td><input type="text" class="form-control form-control-solid text-end total" name="total[]" min="1" placeholder="0.00" /></td>
<td class="pt-5 text-end">
<button class="btn btn-sm btn-icon btn-active-color-primary" id="removeRow">Remove</button>
</td>
</tr>
</tbody>
</table>
Add dynamic rows to the table向表中添加动态行
<script>
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){b=i-1;
$('#addr'+i).html($('#addr'+b).html()).find('td:first-child').html(i+1);
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$(document).on('click', '#removeRow', function () {
if(i>1){
$(this).parent().parent().remove();
i--;
}
calc();
});
</script>
Populate price and tax fields from data attributes从数据属性填充价格和税收字段
<script>
$(document).ready(function() {
$('tr .itemname').change(function(){
var selected = $('option:selected', this);
// this should now output the correct product name and its rate.
console.log(selected.data('tax'), selected.data('rate') );
// now to add it to rate field within this TR
$(this).parent().parent().find('.price').val( selected.data('rate') );
$(this).parent().parent().find('.tax').val( selected.data('tax') );
});
});
</script>
When select the item first row data populate correctly.当 select 项目第一行数据正确填充时。 However when dynamically add a new row to table and select item its not getting the price and tax values.
但是,当向表和 select 项目动态添加新行时,它不会获得价格和税收值。
I´m not quite sure if this will actually fix it but there is 1 obvious error in your code.我不太确定这是否会真正解决它,但您的代码中有 1 个明显的错误。
this line这条线
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
appends the tr´s to the table but it should append the tr´s to tbody, so change it to将 tr´s 附加到表中,但它应该 append tr´s 到 tbody,因此将其更改为
$('#tab_logic tbody').append('<tr id="addr'+(i+1)+'"></tr>');
i guess your .parent().parent()...
works for the first item correctly because it´s in tbody and for the new added not我猜你的
.parent().parent()...
适用于第一项正确,因为它在 tbody 中,而对于新添加的不是
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.