Subtract from parent rows

https://stackoverflow.com/questions/20490237

30-08-2022
|

Question

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>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>A1</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>A2</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>A3</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="A" />
        </td>
    </tr>
    <tr class="parent-B">
        <td>
             <h5>B</h5>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>B1</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="B" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="B" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="B" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>B2</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="B" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="B" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="B" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>B3</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="B" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="B" />
        </td>
        <td>&nbsp;</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>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>C1</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>C2</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>C3</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="C" />
        </td>
    </tr>
    <tr class="parent-D">
        <td>
             <h5>D</h5>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>D1</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="D" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="D" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="D" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>D2</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="D" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="D" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="D" />
        </td>
    </tr>
    <tr>
        <td>
             <h6>D3</h6>

        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="D" />
        </td>
        <td>&nbsp;</td>
        <td>
            <input type="text" data-parent="D" />
        </td>
        <td>&nbsp;</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];
            });
        });
    });
});

Solution

fiddle Demo

html

<tr class="total" data-par="A,B"> <!-- for A-B -->

<tr class="total" data-par="C,D"> <!-- for C-D -->

total_par.each(function () {
    totals = [0, 0, 0];
    var par = $(this).data('par').split(','); // par[0] = A and par[1] = B
    $('[data-parent="' + par[0] + '"]').each(function () { //for A
        totals[$(this).parent('td').index() / 2 - 1] += +this.value; // add all values
    });
    $('[data-parent="' + par[1] + '"]').each(function () {//for B
        totals[$(this).parent('td').index() / 2 - 1] += -1 * +this.value;// subtract all values --> number is multiplied with -1 to make it negative and than added
    });
    $(this).find('input').val(function (i) {
        return totals[i]; //assign values to current input element inside class total
    });
});

fiddle Demo

total_par.each(function () {
    totals = [0, 0, 0];
    var par = $(this).data('par').split(',');
    $('[data-parent="' + par[0] + '"]').each(function () {
        totals[$(this).parent('td').index() / 2 - 1] += +this.value;
    });
    $('[data-parent="' + par[1] + '"]').each(function () {
        totals[$(this).parent('td').index() / 2 - 1] -= +this.value;// subtract all values
    });
    $(this).find('input').val(function (i) {
        return totals[i];
    });
});

fiddle Demo

find_parent_row.nextUntil('[class*="parent-"]').find('input[data-parent="' + parent_name + '"]').each(function () {
    totals[$(this).parent('td').index() / 2 - 1] += +this.value;
});

added .find('input[data-parent="' + parent_name + '"]')

Licensed under: CC-BY-SA with attribution

Not affiliated with StackOverflow