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?
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];
});
});
});
});
fiddle Demo
html
js
or
fiddle Demo
fiddle Demo
added
.find('input[data-parent="' + parent_name + '"]')