[英]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.