Assumptions
- You will have multiple groups like on the example in the same
table
element - You can add a class
contract
to thetr
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.