0

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];
            });
        });
    });
});
input
  • 7,503
  • 25
  • 93
  • 150

1 Answers1

1

fiddle Demo

html

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

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

js

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
    });
});

or

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 + '"]')

Tushar Gupta - curioustushar
  • 58,085
  • 24
  • 103
  • 107
  • Thanks for your quick reply. But what if I have more than two `data-par`? Like if I want to subtract A, B and C? or A, B, C and D? Is this possible dynamically (without hard-coding A and B and so on)? – input Dec 10 '13 at 10:40
  • When I enter the values for second and third column, the value of the first column also changes. Please check. – input Dec 10 '13 at 11:35