How to sum values in an HTML table column

问题

I have checked every conceivable questions available on SO but did not find one that solved my problem. The closest I got was on this.

In my Django app I have a dynamic table with columns for price, quantity and amount (price * quantity) besides other fields. I am looking to get the sum total of "amount" column. Rows can be added at runtime and for my test purpose I have kept the default number of rows to 3 (extra = 2 in inlineformset_factory).

I am using the following jquery for the purpose of calculating values in "amount" column:

$(document).ready(function() {
    mySum=0;
    $("#process").click(function() {
        $(".itemPriceClass").each(function() {
                mySum += parseFloat($('.itemPriceClass input').val());
            alert('The sum of item amount is: ' + mySum);
        });
    });
});

where: "itemPriceClass" is <td> class in the Amount column.

"process" is the id of a button to get the function to execute.

However, when executed (with the default three rows of the table and only the first row having been filled in), I find that the function is executed three times (though the last two rows do not have any data in them) and the final total comes to exactly three times the value in that of the first row amount cell.

I tried to build the function on the line as suggested here (shown below) but the "value" variable returns "blank" when queried and so could not go through this route.

var sum = 0;
// iterate through each td based on class and add the values
$(".price").each(function() {

    var value = $(this).text();
    // add only if the value is number
    if(!isNaN(value) && value.length != 0) {
        sum += parseFloat(value);
    }
});

I was trying to stop the function looping through 3 times (something like exit the loop when a cell value is 0) but could not get a way to implement it.

So my question is:

Why my function is looping through three times (i.e. the number of rows) and thus adding up the cell value in entered in the first row?

回答1:

The problem with your code is that you are looping through the class elements, and still using the initial selector for computing sum. This means that inner selector will select all inputs that are descendant of the 'itemPriceClass'. To overcome this, change

mySum += parseFloat($('.itemPriceClass input').val());

mySum += parseFloat($(this).find('input').val());

so that only input that is descendant of current row that is being looped through is added to the sum.

回答2:

There are several minor bugs in your jquery code:

$(document).ready(function() {
    $("#process").click(function() {
        // Init variable when you press `process` button - will not sum over multiple clicks
        let mySum=0;
        // Loop over inputs directly.
        $(".itemPriceClass input").each(function() {
                mySum += parseFloat($(this).val());
        });
        // Alert at the end of the function, after all loops are done.
        alert('The sum of item amount is: ' + mySum);
    });
});

来源：https://stackoverflow.com/questions/59005062/how-to-sum-values-in-an-html-table-column

标签

jquery

django