如何获得动态创建的行的总价格？

Posted 2021-03-27

我想要汇总所有动态创建的行的价格并显示到总输入字段中..我已经尝试了一些但不适用于我。我已经发布了我的脚本和图像，解释了它应该如何工作。一切正常，在数据库中保存只需要所有项目的总量。请参阅图像以获得清晰的概念。第1行的总计总计节省但不适用于动态创建的行。

图片：It should work like this

html：

   <div class="form-group">
     <label>Total</label>
      <input readonly type="text" id="total_amount" class="form-control"
       name="total_amount">
    </div>

脚本：

 <script>
    var counterr = 1;
    $(document).ready(function () {

        $('#unit_price,#item_quantity').change(function () {
            // alert();
            var unitPrice = $('#unit_price').val();
            // console.log(unitPrice);
            var quantity = $('#item_quantity').val();
            // console.log(quantity);

            var total = (unitPrice * quantity).toFixed(0);

            $('#total_price').val(total);
            $('#total_amount').val(total);

        });


        // Input Fields


        var maxField = 100; //Input fields increment limitation
        var addButton = $('#add_button'); //Add button selector
        var wrapper = $('.field_wrapper'); //Input field wrapper

        $(addButton).click(function (e) {
            e.preventDefault();
            counterr++;
            //Check maximum number of input fields
            if (counterr < maxField) {
                fieldHTML = makeNewRow(counterr);
                $(wrapper).append(fieldHTML); //Add field html
                // $('#department-'+counterr).select2();

                // console.log("Unit price", counterr);
                $('.unit_price' + counterr).change(function () {
                    // console.log("hello");
                    var unitPrice = $('.unit_price' + counterr).val();
                    // console.log(unitPrice);
                    var quantity = $('#item_quantity' + counterr).val();
                    // console.log(quantity);

                    var total = (unitPrice * quantity).toFixed(0);

                    $('#total_price' + counterr).val(total);


                     $('#total_price').each(function() {
                    subtotal += parseFloat($(this).val());
                    console.log('test',subtotal);
                });
                 $('#total_amount').val(subtotal);

                });


            }

        });


        //Once remove button is clicked
        $(wrapper).on('click', '.remove_button', function (e) {
            e.preventDefault();
            $(this).parent('#newrow').remove(); //Remove field html
            counterr = counterr--; //Decrement field counter
        })


    });

    function makeNewRow(counterr) {

        return '<div class="row" id="newrow">' +
            '<div class="col-md-4">' +
            '<div class="form-group">' +
            '<select onChange="getPurchasePrice(this.value);" style="background-color: #f5f6f9" id="item_name' + counterr + '" class="form-control dep"' +
            'placeholder="Enter Item" name="testing[]"' + '>' +
            '<option value = "">Select Item</option>' + '>' +
            '@foreach($items as $item)' + '>' +
            '<option value = "{{$item->id}}">{{$item->item_name}}</option>' + '>' +
            '@endforeach' + '>' +
            '</select>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<input style="background-color: #f5f6f9" type="number" id="item_quantity' + counterr + '" class="form-control"' +
            'placeholder="Enter.." name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-2">' +
            '<div class="form-group">' +
            '<input style="background-color: #f5f6f9" type="number" id="unit_price' + counterr + '" class="unit_price' + counterr + ' form-control"' +
            'placeholder="Enter.." name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-3">' +
            '<div class="form-group">' +
            '<input value="0" style="background-color: #f5f6f9" disabled type="text" id="total_price' + counterr + '" class="form-control"' +
            'placeholder="Total" name="testing[]"' + '>' +
            '</div>' +
            '</div>' +
            '<a style="height:40px;margin-left:25px" href="javascript:void(0);" class="btn btn-danger remove_button">X</a>' +
            '</div>'; //New input field html
    }

    /*function removeDiv(no){
        $("#testingrow-"+no).remove();
        x--;
    }*/


</script>

答案

添加一个函数来重新计算总计'recalcGrandTotal'

var recalcGrandTotal = function() {
    var grandTotal = 0; // Declare a var to hold the grand total
    $("[id^=total_price]").each(function() { // Find all elements with an id that starts with 'total_price'
        grandTotal += parseInt($(this).val()); // Add the value of the 'total_price*' field to the grand total
      })
  $('#total_amount').val(grandTotal); // append grand total amount to the total field
}

然后，将此功能挂钩到“总价”重新计算功能：查找

$('#total_price' + counterr).val(total);

添加后：

recalcGrandTotal();

要在删除项目时从总计中减去，请将此功能挂钩到项目删除功能。找：

counterr = counterr--; //Decrement field counter

添加后：

recalcGrandTotal();

另一答案

将名为total_price的类添加到total_price id元素并进行更改

 $('#total_price').each(function() {
                    subtotal += parseFloat($(this).val());
                    console.log('test',subtotal);

至

$('.total_price').each(function() {
                        subtotal += parseFloat($(this).val());
                        console.log('test',subtotal);
$('#total_amount').val(subtotal);

另一答案

var counterr = 1;
var subTotal = 0; // Global variable

$(document).ready(function () {

    $('#unit_price,#item_quantity').change(function () {
        // alert();
        var unitPrice = $('#unit_price').val();
        // console.log(unitPrice);
        var quantity = $('#item_quantity').val();
        // console.log(quantity);

        var total = (unitPrice * quantity).toFixed(0);

        subTotal += total; // Assign value

        $('#total_price').val(total);
        $('#total_amount').val(total);

    });


    // Input Fields


    var maxField = 100; //Input fields increment limitation
    var addButton = $('#add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper

    $(addButton).click(function (e) {
        e.preventDefault();
        counterr++;
        // When you click Add Button for seeing Sub Total amount
        $('total_amount').val(subTotal); // Show Sub-Total value
    });

});