Question

javascript calculation for multi row table?

Forms

Updated October 19, 2015

asked on November 12, 2014

Hi,

I am looking to do a simple calculation of Hour*Rate = total for a table, but this table will be a multi-row.

My current code works for only the first row, and when trying to add another row it inputs the total value of the first row into the second row, third etc...

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var hour = 0;
      	var rate = 0;
        $('.cf-table-block tbody tr').each(function () {
            $(this).find('.hour input').each(function () {
              	hour += parseNumber($(this).val()); 
            			  });
            $(this).find('.rate input').each(function () {
                rate += parseNumber($(this).val());
                          });
        });
        $('.total input').val(hour * rate);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

2 0

Answer

SELECTED ANSWER

replied on November 12, 2014 • Show version history

you are referencing the table rows, then referencing each row of the hour and each row of the rate. That is not what you need to do.

Take out the ".each(function(){" part and instead use the ".val()" code to get the value of that item in that row.

You will also want to include the "$(this).find" code for the total input field, so that it only changes that row. If you want to have a grand total field, then it should be outside the table and then your current code for the total would work.

If you are hoping to have the total for the row inside the "Total" field for each row, you should be resetting those hour and rate variables at the beginning of the ".each(" for the table (line 06)

Have not tested it, but this is how I would configure this, and then you would need to add a field at the bottom with "Grandtotal" as the CSS Class

$(document).ready(function () {
    $('.cf-table-block').on('blur', 'input', sumtotal);
    function sumtotal() {
        var hour = 0;
      	var rate = 0;
        var total = 0;
        var subtotal = 0;

        $('.cf-table-block tbody tr').each(function () {
            hour =  parseNumber($(this).find('.hour input').val()); 
            rate = parseNumber($(this).find('.rate input').val());
           
            subtotal = (hour * rate);

            $(this).find('.total input').val(subtotal);
            total += subtotal;
        });
        $('.Grandtotal input').val(total);
    }
    function parseNumber(n) {
        var f = parseFloat(n); //Convert to float number.
        return isNaN(f) ? 0 : f; //treat invalid input as 0;
    }
});

3 0

Replies

replied on October 19, 2015

Thanks Kenneth! This works perfect.

As it is a dynamic table, once a row is filled the total is calculated. But when the row is deleted, the total is not subtracting the deleted row value.

Can you help with this?

1 0

replied on November 12, 2014

Thanks Kenneth, your suggestion worked perfectly.

0 0

You are not allowed to follow up in this post.

Question

Question

javascript calculation for multi row table?

Answer

Replies

Sign in to reply to this post.