CODEWITHSUNDEEP
jqueryjquery-calculation
input
input

Reputation: 7519

Subtract from parent rows

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

Upvotes: 0

Views: 149

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

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

Upvotes: 1

Related Questions