0

我有一个问题，现在，我可以计算静态 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>
4

1 回答 1

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/

于 2013-08-23T13:33:43.450 回答