如何总计动态创建的字段 [英] How to total dynamically created fields

问题描述

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

I have a table row that includes price, quantity and total fields. The total field is auto totaled based on what the user enters in the price and quantity.

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

You are able to dynamically create/remove new rows (products) within the table and each dynamicly created row will also total.

我也有一个应该将所有字段加起来的方框，但是我的问题是我不确定如何获取所有字段的值，因为每次都可能不同.

I also have a box that should total all the fields, but the issue I have is that I am not sure how to get the values of all the fields, since each time it could be different.

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

Right now when a row is updated it will update the variable "total" to the total of that row, and that will be displayed as well in the total box.

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

I thought maybe I could add the numbers to an array, but I was not sure if that would work when the row is deleted.

如何创建一个函数来创建表中所有总计的总计?

How can a create a function that will create a grand total of all the totals from the table?

此处位于JSFiddle中- http://jsfiddle.net/xntn7p5p/

Here it is in a 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>

推荐答案

在每个keyup(或其他适当的事件)中，您要:

At each keyup (or other appropriate event) you want to:

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

1. Initialize grandTotal
2. Iterate through all rows each time calculating the total and adding it to grandTotal
3. Update the grandTotal element outside the loop/iteration

代码如下:

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:

Plus, you can make further changes to refresh grandTotal if a row is deleted:

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

1. Put the the code above in a function reCalculate and adjust accordingly,
2. Call the function on keyup and when a row is deleted.

代码将是:

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() {
    .....
}

演示

这篇关于如何总计动态创建的字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！