Question

I have a table with column totals and row totals. I have it set up that when someone enters a number into the input fields it calculates them on keyup and on page load. The columns are recalculating on page load just fine, but the rows are resetting back to zero.

// Calculate Sum Of Rows
$(function() {
    $('input').live('keyup', newSum);
    newSum();
});
function newSum() {
    var sum = 0;
    var thisRow = $(this).closest('tr');
    //iterate through each input and add to sum
    $(thisRow).find("input:not(.ignore):not(.description):not(.miles)").each(function() {
            val = parseFloat(this.value);
            sum += isNaN(val) ? 0 : val;   
    });
    //change value of total
    $(thisRow).find(".sumtotalclaimed").html(sum);
}

Here’s the code for the columns, which works perfectly (recalculates on page load):

// Calculate Sum Of Columns
$(function() {
    $('input.miles').live('keyup', calculateSum1);  
    calculateSum1();
} );
function calculateSum1() {
    var sum = 0;
    //iterate through each textboxes and add the values
    $("input.miles").each(function() {
        //add only if the value is number
        if(!isNaN(this.value) && this.value.length!=0) {
            sum += parseFloat(this.value);
        }
    });
    //.toFixed() method will roundoff the final sum to 2 decimal places
    $("#summiles").html(sum);
}

I thought it would be as simple as putting newSum(); in the function, but that’s not working. Any ideas what I’m doing wrong?

Thanks!

Answer 1

You have no this on page load. So it can’t find thisRow. The offending line is var thisRow = $(this).closest('tr');

The way I’ve done this in the past is to find the first input in question and trigger the event, thus calling the method with a fully inflated event.

For example, instead of calling newSum(); directly, call $('input').first().trigger('keyup') which will automatically call the newSum function.

EDIT: http://jsfiddle.net/DTPZQ/3/