下拉数据-在动态添加的行上填充到输入字段的属性

Question

**这是我目前想要从数据属性中填充价格和税务文件的代码**

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

向表添加动态行

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

从数据属性填充价格和税收字段

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

当选择项目第一行数据正确填充时，。但是，当动态地向表中添加一个新行并选择项目时，它不会获得价格和税额。

Answer 1

我不太确定这是否真的能修复它，但是在您的代码中有一个明显的错误。

这条线

$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');

将tr‘s追加到表中，但它应该将tr’s附加到tbody，因此将其更改为

$('#tab_logic tbody').append('<tr id="addr'+(i+1)+'"></tr>');

我想您的.parent().parent()...对于第一项是正确的，因为它在tbody中，对于新添加的不是。