Question

我需要什么 我想总结所有数量作为图像，但我不能这样做

如下所示，如何使用unitPrice将数量倍数后的所有金额合计？

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

以下是Javascript代码 此js只能从单位价格中获得，其数量类似于 amount = quant * unit

结果应为Result = amount + amount1 + amount2 + amount3 + amount4 + amount5。但我不能那样做

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

我不能总计所有金额

请帮忙

enter image description here

Answer 1

您需要将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>

所以你可以更新你的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);
  });
});

Answer 2

另一种方法将由此

完成

每当用户在更改事件上输入quantity / unit时，将计算并设置金额值。

稍后调用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

Answer 3

以下应该可以使用，您忘记编写添加代码

$('.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));
});

Answer 4

向subTotal的所有第3列输入字段添加一个类。然后就像编写一个函数来完成此任务一样简单。

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

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

    return total;
};

然后编写一个函数来设置元素的值。

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

现在，只要用户修改导致总计更改的任何值，就可以触发updateTotal()方法。

如何计算javascript中的小计和总计？

4 个答案: