使用jQuery计算foreach内的列在Laravel中不起作用

问题描述

我有一个表，该表正在由数据库中的项目填充.我使用 foreach 为下一项动态添加行.而且我还使用 jquery 计算每行的价格和数量，但问题是我无法使其工作.这是我的代码，

I have a table that is being populated by the items from database. I use foreach to dynamically add rows for the next items. And also I use jquery to calculate the price and quantity per row but the problem is I can't make it work. here's my Code,

@php
    $counter = 0;
@endphp
@foreach($order->orderItems as $orderItem)
@php
    $counter++; 
@endphp
    <tr>
        <td><input class="form-control autocomplete_txt" type='text' data-type="product_code" id='product_code_{{$counter}}' name='product_code[]' for="1" value="{{ $orderItem->product_code }}" required/></td>
        <td><input class="form-control autocomplete_txt" type='text' data-type="product_name" id='product_name_{{$counter}}' name='product_name[]' for="1" value="{{ $orderItem->product_name }}" required/></td>
        <td><input class="form-control product_price" type='number' data-type="product_price" id='product_price_{{$counter}}' name='cost[]' for="1" value="{{ $orderItem->cost }}" required/></td>
        <td><input class="form-control quantity" type='number' id='quantity_{{$counter}}' name='quantity[]' for="1" value="{{ $orderItem->quantity }}" required/></td>
        <td><input class="form-control total_cost" type='text' id='total_cost_1' name='total_cost[]' for='1' value="{{ $orderItem->total_cost }}" readonly/>
            <input class="form-control product_id" type='hidden' data-type="product_id" id='product_id_{{ $orderItem->id }}' name='product_id[]'/>
            <input class="form-control product_id" type='hidden' data-type="order_id" id='oder_id_{{ $orderItem->id }}' name='order_id[]' value="1" /></td>
        <td>
            @if ($counter % 1 == 0 && $counter > 1)
            @else
                <button type="button" name="add" id="add" class="btn btn-success circle"><i class="fas fa-plus-circle"></i></button>
            @endif
        </td>

        <script type="text/javascript">
            var calc = {{$counter}};

            function getTotalCost(calc) {
                var qty1 = $('#quantity_'+calc).val();
                var price1 = $('#product_price_'+calc).val();
                var totNumber1 = (qty1 * price1);
                var tot1 = totNumber1.toLocaleString("en-US", { maximumFractionDigits: 2});
                $('#total_cost_'+calc).val(tot1);
                calculateSubTotal1();
            }
            function calculateSubTotal1() {
                var grandtotal1 = 0;
                $('.total_cost').each(function() {
                    grandtotal1 += parseFloat($(this).val().replace(/,/g,''));
                });                    
                $('#grandtotal').val(grandtotal1.toLocaleString("en-US", { maximumFractionDigits: 2}));
            }
        </script>
    </tr>
@endforeach

请帮助.提前非常感谢您！

Please help. Thank you so much in advance!

推荐答案

尝试等待DOM完全加载.在循环中:

Try waiting your DOM to load entirely. Inside your loop:

@foreach (...)
...
<script>
// Execute your DOM manipulations when document is ready.
$(document).ready(function() {
    var calc = {{$counter}};

    getTotalCost(calc);
});
</script>
...
@endforeach

外部:

<script>
    function getTotalCost(calc) {
        var qty1 = $('#quantity_'+calc).val();
        var price1 = $('#product_price_'+calc).val();
        var totNumber1 = (qty1 * price1);
        var tot1 = totNumber1.toLocaleString("en-US", { maximumFractionDigits: 2});

        $('#total_cost_'+calc).val(tot1);

        calculateSubTotal1();
    }

    function calculateSubTotal1() {
        var grandtotal1 = 0;

        $('.total_cost').each(function() {
            grandtotal1 += parseFloat($(this).val().replace(/,/g,''));
        });    

        $('#grandtotal').val(grandtotal1.toLocaleString("en-US", { maximumFractionDigits: 2}));
    }
</script>

---

提示:

在刀片中的foreach循环中，您可以访问名为$loop的生成的变量.

In a foreach loop in blade, you have access to a generated variable called $loop.

据我所见，您的$counter变量的结果与$loop的属性相同:$loop->iteration.

And with what I can see, your $counter variable has the same result as a property of the $loop one: $loop->iteration.

查看 Laravel文档，以获取刀片循环的更多属性.

Check the Laravel Documentation for more properties of a blade loop.

这篇关于使用jQuery计算foreach内的列在Laravel中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！