Fatal编程技术网
  • javascript/
  • 如何在javascript中计算小计和总计？

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

javascript jquery

如何在javascript中计算小计和总计？,javascript,jquery,Javascript,Jquery,我需要什么 我想把所有的加起来和图片一样，但我做不到 如下代码如何将数量乘以单价后的所有金额合计？ 这里是Html元素 <html> <form> <div> Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit"> Amount: <input type='text' class='a

我需要什么 我想把所有的加起来和图片一样，但我做不到

如下代码如何将数量乘以单价后的所有金额合计？

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

  <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>
结果应为结果=金额+金额1+金额2+金额3+金额4+金额5。但我不能那样做

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


$（文档）.ready（函数（）{
$（'.qty，.unit'）。在（'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金额=数量*单位；
var amount1=quant1*unit1；
var amount2=quant2*unit2；
var amount3=数量3*unit3；
var amount4=数量4*unit4；
var amount5=数量5*unit5；
var结果=[]；
if（isNaN（数量）| isNaN（单位））{
$（'.amount'）.val（''）；
}否则{
$（'.amount'）.val（金额）；
}if（isNaN（quant1）| isNaN（unit1））{
$（'.amount1'）.val（''）；
}否则{
$（'.amount1'）.val（amount1）；
}if（isNaN（quant2）| | isNaN（unit2））{
$（'.amount2'）.val（''）；
}否则{
$（'.amount2'）.val（amount2）；
}if（isNaN（数量3）| | isNaN（数量3））{
$（'.amount3'）.val（''）；
}否则{
$（'.amount3'）.val（amount3）；
}if（isNaN（quant4）| | isNaN（unit4））{
$（'.amount4'）.val（''）；
}否则{
$（'.amount4'）.val（amount4）；
}if（isNaN（quant5）| isNaN（quant5））{
$（'.amount5'）.val（''）；
}否则{
$（'.amount5'）.val（amount5）；
} 
});
我不能把所有的金额加起来算作总数

请帮忙

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

$('.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));
});
下面的代码应该可以工作，您忘记了为添加编写代码

$('.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));
});
您需要将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>
您需要将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>
将类添加到
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（）
方法。

向
subTotal
的所有第三列输入字段添加一个类。然后，只需编写一个函数即可完成此任务

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

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

    return total;
};
然后编写一个函数来设置元素的值

var updateTotal = function () {
    $('#grandTotal').val(calculateTotal());
}
现在，每当用户修改导致总数变化的任何值时，您都可以触发
updateTotal（）
方法。

另一种方法将通过该方法完成

每当用户在更改事件中输入数量/单位时，将计算并设置金额值

稍后调用
fnalltoal（）
函数，用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);
}

另一种方法将通过此

每当用户在更改事件中输入数量/单位时，将计算并设置金额值

稍后调用
fnalltoal（）
函数，用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);
}

您似乎还没有编写用于进行总计的代码。您可以通过简单地包装每一行并在所有行中循环来大幅减少代码。将所有类似字段设置为相同的类别（价格、数量、小计）我猜你的问题在于，在某些情况下，你试图累加的
amountX
变量可能不包含数字。既然你已经对其进行了检查，我建议将
amountX
变量添加到
result
中，位置与你设置输入字段值的位置相同你还没有写过做总计的代码，你可以通过简单地包装每一行并在所有行中循环来大幅减少代码。给所有类似的字段设置相同的类（价格、数量、小计）我猜您的问题在于，在某些情况下，您试图相加的
amountX
变量可能不包含数字。由于您已经对其进行了检查，我建议将
amountX
变量添加到
result
中，位置与您设置输入字段值的位置相同。这不是一个问题回答。没有解释，没有评论，只有一大串代码。这不是答案。没有解释，没有评论，只有一大串代码$Marcus，如果我输入所有单位和数量，如果我没有输入所有单位和数量的值，它会起作用