我有4个文本框，基于我需要计算所有关键字功能的给定值。我已经在文本框上使用了循环，并获得了如何计算keyup以获取循环中的下一个文本框并将值附加到小计和总计中的值也需要计算基于给定数量和价格金额的税额，小计，总计应该追加
<td width="20%">
<input type="text" onKeyPress="return isNumberKey(event)" class="" name="quan[]" id="quan[]" maxlength="2" autocomplete="off" placeholder="Quantity" >
</td>
<td width="20%">
<input type="text" class="" name="unit[]" id="unit[]" maxlength="5" autocomplete="off" placeholder="Unit" >
</td>
<td width="20%">
<input type="text" class="" name="tax[]" id="tax[]" maxlength="4" autocomplete="off" placeholder="Tax">
</td>
<td width="15%" colspan="1" valign="top">
<input type="text" class="dollar different_amt" name="amt[]" id="amt[]" value="0.00" readonly>
</td>
<div class="col-md-6 col-md-offset-6">
<div class="col-md-7 text-right">
<p>Subtotal</p>
</div>
<div class="col-md-5 text-center">
<input type="text" class="dollar different_amt" readonly>
</div>
<div class="col-md-7 text-right">
<p>Savings to Customer</p>
</div>
<div class="col-md-5 text-center">
<input type="text" class="dollar different_amt" placeholder="Enter Amount...">
</div>
<div class="col-md-7 text-right">
<p><strong>Grand Total</strong></p>
</div>
<div class="col-md-5 text-center">
<input type="text" class="dollar different_amt bald" readonly>
</div>
</div>
var quantity = document.getElementsByName("quan[]");
var unit_level = document.getElementsByName("unit[]");
var tax = document.getElementsByName("tax[]");
for ( var i = 0; i < quantity.length; i++ ){
$(quantity[i]).on("keyup blur",function(){
var get_val_quant = $(this).val();
if($(this).val()==0){
//alert("value should be greater than zero");
document.getElementById('quantity_error').innerHTML="Please enter number greater than zero";
$("#quantity_error").removeClass('field_validation_error hidden');
$("#quantity_error").addClass('field_validation_error');
return false;
} else {
document.getElementById('quantity_error').innerHTML="";
$("#quantity_error").removeClass('field_validation_error');
$("#quantity_error").addClass('field_validation_error hidden');
}
})
//console.log(unit_level[i]);
$(unit_level[i]).on("keyup blur",function(){
var get_unit_price = $(this).val();
if($(this).val()==0){
//alert("value should be greater than zero");
document.getElementById('unit_error').innerHTML="Please enter number greater than zero";
$("#unit_error").removeClass('field_validation_error hidden');
$("#unit_error").addClass('field_validation_error');
return false;
} else if(get_unit_price!=0){
alert((quantity[i]).value());
return false;
} else{
document.getElementById('unit_error').innerHTML="";
$("#unit_error").removeClass('field_validation_error');
$("#unit_error").addClass('field_validation_error hidden');
}
});
$(tax[i]).on("keyup blur",function(){
console.log($(this).val());
});
}
答案 0 :(得分：0)
我已经使用了unit,quantity,tax个文本框的2个静态行，最后一个文本框是每行的总金额。每当这3个值中的任何一个发生任何变化时，它将计算相关价格并在最后一个文本框中更新，并且还根据客户储蓄价值（如果有的话）计算小计，格式。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<table>
<tr>
<td width="20%">
<input type="text" class="key-up-event" name="quan[]" id="quan[]" maxlength="2" autocomplete="off" placeholder="Quantity" >
</td>
<td width="20%">
<input type="text" class="key-up-event" name="unit[]" id="unit[]" maxlength="5" autocomplete="off" placeholder="Unit" >
</td>
<td width="20%">
<input type="text" class="key-up-event" name="tax[]" id="tax[]" maxlength="4" autocomplete="off" placeholder="Tax">
</td>
<td width="15%" colspan="1" valign="top">
<input type="text" class="dollar different_amt" name="amt[]" id="amt[]" value="0.00" readonly>
</td>
</tr>
<tr>
<td width="20%">
<input type="text" class="key-up-event" name="quan[]" id="quan[]" maxlength="2" autocomplete="off" placeholder="Quantity" >
</td>
<td width="20%">
<input type="text" class="key-up-event" name="unit[]" id="unit[]" maxlength="5" autocomplete="off" placeholder="Unit" >
</td>
<td width="20%">
<input type="text" class="key-up-event" name="tax[]" id="tax[]" maxlength="4" autocomplete="off" placeholder="Tax">
</td>
<td width="15%" colspan="1" valign="top">
<input type="text" class="dollar different_amt" name="amt[]" id="amt[]" value="0.00" readonly>
</td>
</tr>
</table>
<div class="col-md-6 col-md-offset-6">
<div class="col-md-7 text-right">
<p>Subtotal</p>
</div>
<div class="col-md-5 text-center">
<input type="text" class="dollar different_amt" id="subttot" readonly>
</div>
<div class="col-md-7 text-right">
<p>Savings to Customer</p>
</div>
<div class="col-md-5 text-center">
<input type="text" class="dollar different_amt" id="savngs" placeholder="Enter Amount...">
</div>
<div class="col-md-7 text-right">
<p><strong>Grand Total</strong></p>
</div>
<div class="col-md-5 text-center">
<input type="text" class="dollar different_amt bald" id="fintot" readonly>
</div>
</div>
<script type="text/javascript">
$(".key-up-event").on("keyup blur", function(){
if ($(this).attr("name") == "quan[]") {
var ind = $("input[name='quan[]']").index(this);
} else if ($(this).attr("name") == "unit[]") {
var ind = $("input[name='unit[]']").index(this);
} else if ($(this).attr("name") == "tax[]") {
var ind = $("input[name='tax[]']").index(this);
}
var quan, unit, tax, amt;
quan = parseFloat($("input[name='quan[]']:eq("+ind+")").val());
quan = (isNaN(quan)) ? 0 : quan;
unit = parseFloat($("input[name='unit[]']:eq("+ind+")").val());
unit = (isNaN(unit)) ? 0 : unit;
tax = parseFloat($("input[name='tax[]']:eq("+ind+")").val());
tax = (isNaN(tax)) ? 0 : tax;
amt = quan*unit + tax;
$("input[name='amt[]']:eq("+ind+")").val(amt)
subtotal();
});
function subtotal() {
var tot = 0;
$("input[name='amt[]']").each(function(){
tot += parseFloat($(this).val());
});
$("#subttot").val(tot)
finaltotal();
}
$("#savngs").on("keyup blur", function(){
finaltotal();
});
function finaltotal() {
var tot = 0;
var subtot = parseFloat($("#subttot").val());
subtot = (isNaN(subtot)) ? 0 : subtot;
var savngs = parseFloat($("#savngs").val());
savngs = (isNaN(savngs)) ? 0 : savngs;
tot = subtot-savngs;
$("#fintot").val(tot)
}
</script>