I'm trying to subtract the value of parent header rows (which are the sum of their respective child rows) but it just keeps on adding while displaying the minus symbol. How do I subtract?
jsFiddle
HTML:
<table class="table">
<tr class="parent-A">
<td>
<h5>A</h5>
</td>
<td> </td>
<td>
<input type="text" />
</td>
<td> </td>
<td>
<input type="text" />
</td>
<td> </td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<h6>A1</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
</tr>
<tr>
<td>
<h6>A2</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
</tr>
<tr>
<td>
<h6>A3</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
<td> </td>
<td>
<input type="text" data-parent="A" />
</td>
</tr>
<tr class="parent-B">
<td>
<h5>B</h5>
</td>
<td> </td>
<td>
<input type="text" />
</td>
<td> </td>
<td>
<input type="text" />
</td>
<td> </td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<h6>B1</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
</tr>
<tr>
<td>
<h6>B2</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
</tr>
<tr>
<td>
<h6>B3</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
<td> </td>
<td>
<input type="text" data-parent="B" />
</td>
</tr>
<tr class="total" data-par="A,B">
<td colspan="2">
<h4>Total A - B</h4>
</td>
<td colspan="2">
<input type="text" />
</td>
<td colspan="2">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
<tr class="parent-C">
<td>
<h5>C</h5>
</td>
<td> </td>
<td>
<input type="text" />
</td>
<td> </td>
<td>
<input type="text" />
</td>
<td> </td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<h6>C1</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
</tr>
<tr>
<td>
<h6>C2</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
</tr>
<tr>
<td>
<h6>C3</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
<td> </td>
<td>
<input type="text" data-parent="C" />
</td>
</tr>
<tr class="parent-D">
<td>
<h5>D</h5>
</td>
<td> </td>
<td>
<input type="text" />
</td>
<td> </td>
<td>
<input type="text" />
</td>
<td> </td>
<td>
<input type="text" />
</td>
</tr>
<tr>
<td>
<h6>D1</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
</tr>
<tr>
<td>
<h6>D2</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
</tr>
<tr>
<td>
<h6>D3</h6>
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
<td> </td>
<td>
<input type="text" data-parent="D" />
</td>
</tr>
<tr class="total" data-par="C,D">
<td colspan="2">
<h4>Total C - D</h4>
</td>
<td colspan="2">
<input type="text" />
</td>
<td colspan="2">
<input type="text" />
</td>
<td>
<input type="text" />
</td>
</tr>
</table>
jQuery:
$(function () {
$('[class*="parent-"] input').attr('readonly', true);
var total_par = $('tr.total');
$('input[type=text]').on('blur', function () {
var totals = [0, 0, 0],
parent_name = $(this).data('parent'),
find_parent_row = $('tr.parent-' + parent_name);
find_parent_row.nextUntil('[class*="parent-"]').find('input').each(function () {
totals[$(this).parent('td').index() / 2 - 1] += +this.value;
});
find_parent_row.find('input').each(function (i) {
this.value = totals[i];
});
total_par.each(function () {
totals = [0, 0, 0];
var par = $(this).data('par').split(',');
$('[data-parent="' + par[0] + '"]').add('[data-parent="' + par[1] + '"]').each(function () {
totals[$(this).parent('td').index() / 2 - 1] -= this.value; //subtract doesn't seem to be working!
});
$(this).find('input').val(function (i) {
return totals[i];
});
});
});
});