Calculate sum of columns

Question

I have table in which the columns have two input fields. I want to calculate the sum of the first input field of the child rows and add the total corresponding to the first input field of the parent row of the column.

Right now with the code, it does add up correctly but it doesn't set the total in the correct input fields of the parent (that is, in the corresponding input field of the parent row).

Please see jsFiddle.

Updated Fiddle

Code:

HTML:

<table>
    <tr class="parent-realtor percent-text">
        <td>
            <h5>Realtor Percent</h5>
        </td>
        <td>
            <input type="text" class="percent-total" /> //parent
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //parent
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //parent
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //parent
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
    </tr>
    <tr>
        <td>
            <h6>Contract Amount</h6>
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
    </tr>
    <tr class="percent-text">
        <td>
            <h6>Buyer's Agent</h6>
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
    </tr>
    <tr class="percent-text">
        <td>
            <h6>Seller's Agent</h6>
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
    </tr>
</table>

jQuery:

$('.percent').on('keyup', function () {
    //calcRealtor();
    var totals = [0, 0, 0, 0, 0, 0, 0, 0],
        parent_name = $(this).data('parent'),
        find_parent_row = $('tr.parent-realtor');
    find_parent_row.nextUntil('[class="parent-realtor"]').find('input[data-parent="realtor"]').each(function () {
        totals[$(this).parent('td').index() / 1 - 1] += +this.value;
    });
    find_parent_row.find('input').each(function (i) {
        this.value = totals[i];
    });

});

Answer 1

Assumptions

1. You will have multiple groups like on the example in the same table element
2. You can add a class contract to the tr that holds the contract inputs

Try

$('table').on('keyup', '.percent', function(){
               // self holds a reference to the input we entered data
    var self = $(this), 
                  // we then find the containing tr element and then find the corresponding `parent-realtor` row and cache it in realtor variable
        realtor = self.closest('tr').prevAll('.parent-realtor').first(),
                // we cache a reference to the all tr rows that interest us
        group = realtor.nextUntil('.parent-realtor'),
                    // we filter the contract inputs
        contracts = group.filter('.contract').find('input'),
                   // and we filter the input elements that will be added to the contracts
        percents = group.filter('.percent-text');

    // for each contract
    contracts.each(function(idx){  // idx holds the index of the contract input
        // gets its value. the + converts it to an number
        var final = +this.value;
        // for each row of elements to add
        percents.each(function(){
            // find the input element that we are interested
            // meaning the one with the same index as our contract input
            // and get its value
            var extra = +$(this).find('input.percent').eq(idx).val();

            // add it to the total of this contracts
            final += extra;
        });

        // find the input that holds the total (based on index again)
        // and assign the total value we just calculated
        realtor.find('input.percent-total').eq(idx).val(final);
    });
});

Demo at http://jsfiddle.net/gaby/R5Cjw/2/

---

Instead of setting onfocus="this.blur()" you could just set the to readonly and be done.

Also you could name (with some unique value) each of the realtor input fields and give that value to each corresponding input element so you could match them easier.