我有一个问题,现在,我可以计算静态html字段的总和。我想计算每个新动态文件的总和。照片显示第一行是静态的,并正确计算总和。 这是一个具体的部署示例 其他字段是动态添加的,第一个字段是静态的。 http://postimg.org/image/ivjbblo1p/ 我的问题是,如何编写动态字段自动计算总和的代码?
$(document).ready(function(){
var counter = 0;
$('.fee').keyup(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
var tax = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())) * (0.20));
var neto = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())));
var total = tax + (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())));
// var total = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())));
counter += 1;
$('.fee').each(function(){
var item = parseFloat($(this).val());
if (isNaN(item)) { item = 0; }
total = total;
tax = tax;
neto = neto;
});
$('.tax_1').val(tax.toFixed(2));
$('.neto_1').val(neto.toFixed(2));
$('.rez').val('din' + total.toFixed(2));
$('.total_1').val(total.toFixed(2));
});
});
var counter = 1;
$(function(){
$('p#add_field').click(function() {
counter += 1;
$('.item_1').append('<input type="hidden" name="numItems" id="numItems1' + counter + '" value="' + counter + '" />' +
'<div class="item item_total_' + counter + '"><input type="text" id="total_' + counter + '" class="total_' + counter + '" name="total_' + counter + '" value="<?php set_value("total_' + counter + '"); ?>"/>'+
'<div class="item item_tax_' + counter + '"><input type="text" id="tax_' + counter + '" class="tax_' + counter + '" name="tax_' + counter + '" value="<?php set_value("tax_' + counter + '"); ?>" />'+
'<div class="item item_neto_' + counter + '"><input type="text" id="neto_' + counter + '" class="neto_' + counter + '" name="neto_' + counter + '" value="<?php set_value("neto_' + counter + '"); ?>" />'+
'<div class="item item_quantity_' + counter + '"><input type="text" id="quantity_' + counter + '" class="fee quantity_' + counter + '" name="quantity_' + counter + '" value="<?php set_value("quantity_' + counter + '"); ?>"/>'+
'<div class="item item_priceperunit_' + counter + '"><input type="text" id="priceperunit_' + counter + '" class="fee priceperunit_' + counter + '" name="priceperunit_' + counter + '" value="<?php set_value("priceperunit_' + counter + '"); ?>" />'+
'<div class="item item_description_' + counter + '"><input type="text" id="description_' + counter + '" class="description_' + counter + '" name="description_' + counter + '" value="<?php set_value("description_' + counter + '"); ?>"/>'+
'<div class="item item_unit_' + counter + '"><input type="text" id="unit_' + counter + '" class="unit_' + counter + '" name="unit_' + counter + '" value="<?php set_value("unit_' + counter + '"); ?>" />'
);
});
});
HTML
<input type="hidden" name="numItems" id="numItems1" value="1" />
<div class="item item_1">
<div class="item item_unit_1">
<p>Unit</p>
<input type="text" id="unit_1" class="unit_1" name="unit_1" value="<?php set_value("unit_1"); ?>"/>
<?php echo form_error('unit_1'); ?>
</div>
<div class="item item_description_1">
<p>Description</p>
<input type="text" id="description_1" class="description_1" name="description_1" value="<?php set_value("description_1"); ?>"/>
<?php echo form_error('description_1'); ?>
</div>
<div class="item item_priceperunit_1">
<p>pricepernit</p>
<input type="text" id="priceperunit_1" class="fee priceperunit_1" name="priceperunit_1" value="<?php set_value("priceperunit_1"); ?>"/>
<?php echo form_error('priceperunit_1'); ?>
</div>
<div class="item item_quantity_1">
<p>Quantity</p>
<input type="text" id="quantity_1" class="fee quantity_1" name="quantity_1" value="<?php set_value("quantity_1"); ?>"/>
<?php echo form_error('quantity_1'); ?>
</div>
<div class="item item_neto_1">
<p>Neto</p>
<input type="text" id="neto_1" class="neto_1" name="neto_1" value="<?php set_value("neto_1"); ?>"/>
<?php echo form_error('neto_1'); ?>
</div>
<div class="item item_tax_1">
<p>Tax</p`enter code here`>
<input type="text" id="tax_1" class="tax_1" name="tax_1" value="<?php set_value("tax_1"); ?>"/>
<?php echo form_error('tax_1'); ?>
</div>
<div class="item item_total_1">
<p>Total</p>
<input type="text" id="total_1" class="total_1" name="total_1" value="<?php set_value("total_1"); ?>"/>
<?php echo form_error('tax_1'); ?>
</div>
</div>
答案 0 :(得分:2)
由于您没有发布任何错误,我不确定您遇到了什么问题,并且提供的代码不完整,但我认为下面的代码可能会帮助您简化功能。
您可以根据需要在此处输入任意数量的输入。您可以选择在要求和的输入字段上添加数据类型属性,并根据该属性进行选择。
HTML:
<form id="myForm">
<input type="text" placeholder="enter number one" />
<input type="text" placeholder="enter number two" />
<div>
<label for="calculateSum">Sum is</label>
<span id="calculateSum">0</span>
</div>
</form>
JavaScript的:
$(document).ready( function() {
$('#myForm').on('keyup', 'input', function() {
var iSum = 0;
$('#myForm input').each( function() {
iSum = iSum + parseFloat($(this).val());
});
$('#calculateSum').html(iSum);
});
});
JSFiddle:http://jsfiddle.net/markwylde/gjz9h/