[英]How to calculate subtotal and grand total in javascript?
我需要的是将所有图像相加,但我做不到
如下代码如何将数量乘以单位价格后总计所有金额?
这是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只能从数量等于数量=数量*数量的单价中总计
结果应为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>
我不能汇总所有金额
请帮忙
您需要将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);
});
});
另一种方法可以做到这一点
每当用户输入更改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);
}
以下应该可行,但您忘记编写代码以进行添加
$('.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));
});
将一个类添加到subTotal
所有第三列输入字段中。 然后,它就像编写一个函数来为您完成此任务一样简单。
var calculateTotal = function() {
var total = 0;
$.each($('.subTotal'), function(index, element) {
total += $(element).val();
});
return total;
};
然后编写一个函数来设置元素的值。
var updateTotal = function () {
$('#grandTotal').val(calculateTotal());
}
现在,每当用户修改任何导致总计更改的值时,您都可以触发updateTotal()
方法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.