如何总计动态创建的字段

Question

我有一个表格行，其中包含价格，数量和总计字段。 总计字段将根据用户输入的价格和数量自动进行总计。

您可以在表中动态创建/删除新行（产品），并且每个动态创建的行也将总计。

我也有一个应该将所有字段总计的框，但是我的问题是我不确定如何获取所有字段的值，因为每次的值可能都不相同。

现在，当更新一行时，它将把变量“总计”更新为该行的总数，并且该变量也将显示在总数框中。

我以为也许可以将数字添加到数组中，但是我不确定删除行后是否可以使用。

一个函数如何创建一个将创建表中所有总计的总计的函数？

它在JSFiddle中-http: //jsfiddle.net/xntn7p5p/

谢谢

的JavaScript

var counter = 1;

jQuery('a.wei-add-service-button').click(function(event){
    event.preventDefault();
    counter++;
    var newRow = jQuery('<tr><td><input type="text" class="wei-add-field description ' + counter + '"/></td><td><input type="text" class="wei-add-field quantity ' + counter + '" /></td><td><input type="text" class="wei-add-field unit-price ' + counter + '"/></td><td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field price-total ' + counter + '" id=""/></td><td><a href="#">X</a></td></tr>');
    jQuery('table.order-details').append(newRow);
});


jQuery('table.order-details').on('click','tr a',function(e){
 e.preventDefault();
jQuery(this).parents('tr').remove();
});


jQuery('table.order-details').on("keyup", "tr", function() {
    var row = jQuery(this);
    var value = jQuery( ".unit-price", row ).val();
    var value2 = jQuery( ".quantity", row ).val();
    var total = value * value2;

    var lineTotal = jQuery( ".price-total." + counter + "2", row ).val();
    testArray[counter] = total;
    var test = testArray[counter];

    var grandTotal;

    for (var i = 0; i < testArray.length; i++) {
        grandTotal += testArray[i] << 0;
    }

    jQuery( ".wei-add-field.price-total", row ).val( '$' + total.toFixed(2) );
    jQuery(".wie-add-subtotal").text( '$' + test.toFixed(2));
  });

的HTML

<table class="order-details">
    <tbody>
    <tr>
        <td><input type="text" value="" name="" placeholder="Work Description" class="wei-add-field description 1"/></td>
        <td><input type="text" value="" name="" placeholder="QTY" class="wei-add-field quantity 1" /></td>
        <td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field unit-price 1"/></td>
        <td><input type="text" value="" name="" placeholder="$0.00" class="wei-add-field price-total 1" id=""/></td>
        <td> </td>
    </tr>
    </tbody>
</table>

<div class="wei-add-service"><a href="#" class="button-secondary wei-add-service-button">Add Item</a></div>

<table class="wei-add-totals">
    <tr>
        <td width="50%">Sub Total</td>
        <td width="50%" class="wie-add-subtotal"> </td>
    </tr>
</table>

Answer 1

您希望在每次keyup （或其他适当的事件）时：

1. 初始化grandTotal
2. 每次都遍历所有行以计算total并将其添加到grandTotal
3. 在循环/迭代之外更新grandTotal元素

代码如下所示：

jQuery('table.order-details').on("keyup", "tr", function() {
    var grandTotal = 0;
    $(this).parent().find('tr').each(function() {
        var row = jQuery(this);
        var value = jQuery( ".unit-price", row ).val();
        var value2 = jQuery( ".quantity", row ).val();
        var total = value * value2;
        grandTotal += total;
        jQuery( ".wei-add-field.price-total", row ).val( '$' + total.toFixed(2) );
    });
    jQuery(".wie-add-subtotal").text( '$' + grandTotal.toFixed(2));
});

演示

另外 ，如果删除了一行，则可以进行进一步的更改以刷新grandTotal ：

1. 将上面的代码放入reCalculate函数中，并相应地进行调整，
2. 在keyup以及删除行时调用该函数。

代码将是：

jQuery('table.order-details').on('click','tr a',function(e){
    e.preventDefault();
    var table = $(this).closest('table');
    jQuery(this).parents('tr').remove();
    reCalculate.call( table );
});

jQuery('table.order-details').on("keyup", "tr", reCalculate);

function reCalculate() {
    var grandTotal = 0;
    jQuery(this).closest('table').find('tr').each(function() {
    .....
}

演示