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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何获得动态创建的行的总价格?相关的知识,希望对你有一定的参考价值。

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

});

以上是关于如何获得动态创建的行的总价格?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用填充旧表中的行的动态数据动态更新新MySQL表中的行?

如何在 if 语句中显示/比较 mysql 行的动态值?

我应该如何获得ANDROID中动态视图的位置

请问如何获得GridView选中行的每一列的信息?

从RecyclerView适配器更新活动或片段的视图

从命令行和存储中读取可更改的行文件