堆栈内存溢出
  简体   繁体   English

如何在JavaScript中计算小计和总计？

[英]How to calculate subtotal and grand total in javascript?

 原文  2014-12-23 09:34:44  2   4    javascript/ jquery

问题描述

What I need I want to sum all to amount as the images but I can't do it 我需要的是将所有图像相加，但我做不到

As below code how can to total all amount after quantity multiple with unitPrice? 如下代码如何将数量乘以单位价格后总计所有金额？

Here is Html element 这是HTML元素 

  <html>
    <form>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    Total All:<input type="text" class="result">
</form>
</html>

Here is Javascript code This js can only total from unit price with quantity like amount = quant*unit 这是Javascript代码，此js只能从数量等于数量=数量*数量的单价中总计

And result should be Result = amount+amount1+amount2+amount3+amount4+amount5. 结果应为Result = amount + amount1 + amount2 + amount3 + amount4 + amount5。 But i can't do that 但是我做不到 

<script>
$(document).ready(function(){
        $('.qty,.unit').on('change', function(){

                var qty     = parseFloat($('.quant').val() );
                var unit    = parseFloat( $('.unit_p').val());

                var quant1  = parseFloat($('.quant1').val() );
                var unit1   = parseFloat( $('.unit1').val());

                var quant2  = parseFloat($('.quant2').val() );
                var unit2   = parseFloat( $('.unit2').val());

                var quant3  = parseFloat($('.quant3').val() );
                var unit3   = parseFloat( $('.unit3').val());

                var quant4  = parseFloat($('.quant4').val() );
                var unit4   = parseFloat( $('.unit4').val());

                var quant5  = parseFloat($('.quant5').val() );
                var unit5   = parseFloat( $('.unit5').val());

                var amount  = qty * unit; 
                var amount1 = quant1*unit1;
                var amount2 = quant2*unit2;
                var amount3 = quant3*unit3;
                var amount4 = quant4*unit4;
                var amount5 = quant5*unit5;

                var result = [];

                if(isNaN(qty) || isNaN(unit)){
                    $('.amount').val('');
                }else{
                    $('.amount').val(amount); 
                }if(isNaN(quant1)||isNaN(unit1)){
                    $('.amount1').val('');
                }else{
                    $('.amount1').val(amount1); 
                }if(isNaN(quant2) || isNaN(unit2)){
                    $('.amount2').val('');
                }else{
                    $('.amount2').val(amount2); 
                }if(isNaN(amount3) || isNaN(amount3)){
                    $('.amount3').val('');
                }else{
                    $('.amount3').val(amount3);
                }if(isNaN(quant4) || isNaN(unit4)){
                    $('.amount4').val('');
                }else{
                    $('.amount4').val(amount4);
                }if(isNaN(quant5)||isNaN(quant5)){
                    $('.amount5').val('');
                }else{
                    $('.amount5').val(amount5);
                } 
        });
</script>

I can't sum all amount for total 我不能汇总所有金额

Please help 请帮忙

在此处输入图片说明

4 个解决方案

解决方案1
 3 已采纳  2014-12-23 09:48:01

You need to change your html to this: 您需要将html更改为此： 

    <html>
    <form>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    <div>
    Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit">
   Amount: <input type='text' class='amount'>
   </div>
    Total All:<input type="text" class="result">
</form>
</html>

and so you can update your jquery code as following: 因此您可以按以下方式更新您的jquery代码： 

$(function () {
    $('.unit,.qty').on('change', function () {
    var unit = $(this).hasClass('unit') ? $(this).val() : $(this).siblings('.unit').val();
    var qty = $(this).hasClass('qty') ? $(this).val() : $(this).siblings('.qty').val();
    unit = unit || 0;
    qty = qty || 0;
    var val = unit >= 1 && qty >= 1 ? parseFloat(unit * qty) : 0;
    $(this).siblings('.amount').val(val);
    var total = 0;
    var update = false;
    $('.amount').each(function () {
        val = parseFloat($(this).val()) | 0;
        total = val ? (parseFloat(total + val)) : total;
    });
    $('.result').val(total);
  });
});

解决方案2
 1  2014-12-23 10:50:51

Another approach will be done by this 另一种方法可以做到这一点

Whenever user enter quantity / unit on change event will calculate and set amount value. 每当用户输入更改quantity / unit ，事件将计算并设置金额值。

Later call fnAlltotal() function which update the result textbox with totalAmount 稍后调用fnAlltotal()函数，该函数使用totalAmount更新结果文本框 

$(".qty").on('input', function () {
    var self = $(this);
    var unitVal = self.next().val();
    self.next().next().val(unitVal * self.val());
    fnAlltotal();
});

$(".unit").on('input', function () {
    var self = $(this);
    var qtyVal = self.prev().val();
    self.next().val(qtyVal * self.val());
    fnAlltotal();
});

function fnAlltotal() {
    var total = 0
    $(".amount").each(function () {
        total += parseFloat($(this).val() || 0);
    });
    $(".result").val(total);
}

WORKING DEMO 工作演示

解决方案3
 0  2014-12-23 09:47:57

Following should work, you have forgot to write code for addition 以下应该可行，但您忘记编写代码以进行添加 

$('.quant, .unit_p, .unit1, .unit2, .unit3, .unit4, .unit5, .quant1, .quant2, .quant3, .quant4, .quant5').on('change', function(){

    var qty     = parseFloat($('.quant').val() );
    var unit    = parseFloat( $('.unit_p').val());

    var quant1  = parseFloat($('.quant1').val() );
    var unit1   = parseFloat( $('.unit1').val());

    var quant2  = parseFloat($('.quant2').val() );
    var unit2   = parseFloat( $('.unit2').val());

    var quant3  = parseFloat($('.quant3').val() );
    var unit3   = parseFloat( $('.unit3').val());

    var quant4  = parseFloat($('.quant4').val() );
    var unit4   = parseFloat( $('.unit4').val());

    var quant5  = parseFloat($('.quant5').val() );
    var unit5   = parseFloat( $('.unit5').val());

    var amount  = qty * unit; 
    var amount1 = quant1*unit1;
    var amount2 = quant2*unit2;
    var amount3 = quant3*unit3;
    var amount4 = quant4*unit4;
    var amount5 = quant5*unit5;

    var result = [];

    if(isNaN(qty) || isNaN(unit)){
        $('.amount').val('');
    }else{
        $('.amount').val(amount); 
    }if(isNaN(quant1)||isNaN(unit1)){
        $('.amount1').val('');
    }else{
        $('.amount1').val(amount1); 
    }if(isNaN(quant2) || isNaN(unit2)){
        $('.amount2').val('');
    }else{
        $('.amount2').val(amount2); 
    }if(isNaN(amount3) || isNaN(amount3)){
        $('.amount3').val('');
    }else{
        $('.amount3').val(amount3);
    }if(isNaN(quant4) || isNaN(unit4)){
        $('.amount4').val('');
    }else{
        $('.amount4').val(amount4);
    }if(isNaN(quant5)||isNaN(quant5)){
        $('.amount5').val('');
    }else{
        $('.amount5').val(amount5);
    } 

    $('.result').val((amount + amount1 + amount2 + amount3 + amount4 + amount5));
});

解决方案4
 0  2014-12-23 09:50:34

Add a class to all of the 3rd column input fields of subTotal . 将一个类添加到subTotal所有第三列输入字段中。 It is then as simple as writing a function to complete this task for you. 然后，它就像编写一个函数来为您完成此任务一样简单。 

var calculateTotal = function() {
    var total = 0;

    $.each($('.subTotal'), function(index, element) {
        total += $(element).val();
    });

    return total;
};

Then write a function to set the value of the element. 然后编写一个函数来设置元素的值。 

var updateTotal = function () {
    $('#grandTotal').val(calculateTotal());
}

Now whenever the user modifies any values causing the total to change, you can trigger the updateTotal() method. 现在，每当用户修改任何导致总计更改的值时，您都可以触发updateTotal()方法。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 用javascript计算小计和总计 - Calculate subtotal and total with javascript 用JavaScript计算总计 - calculate grand total with javascript 用JavaScript计算总计（onkeyup） - Calculate the grand total with javascript (onkeyup) Javascript从mysql计算小计和总计 - Javascript calculate subtotal and total from mysql 如何从列表中计算总计 - How to calculate grand total from a list 如何使用键盘计算总价和总计 - How to calculate total price & grand total using keyup 如何使用javascript动态生成总计 - How to generate grand total dynamically using javascript 如何从动态生成文本框计算小计文本框的总数 - How to calculate the total of subtotal textbox from dynamically generate text box 如何根据onkeypress文本框中的给定值计算价格，小计和总计？ - how to calculate the price, subtotal and total based on given value in textbox onkeypress? 如何根据php中的小计和运费计算总金额？ - How to calculate the Total amount depending upon the subtotal and shipping charges in php?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM