CODEWITHSUNDEEP
jqueryhtmljquery-calculation
input
input

Reputation: 7519

Add and set total value in corresponding input field

I'm trying to add the values in child rows in one column which should set the total in the parent row of that column. Each child td should add the value in the corresponding parent td.

What is happening right now is while I can add up the values of a child rows in the first column and set the total in the corresponding input field of the parent row; if I then add up the values of the child rows in the second column, it doesn't set the value in the parent of the second column. It adds up to the parent of the first column.

Here's the code [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>
</table>

jQuery:

$('input[type=text]').on('blur', function() {

    var $dataRows=$(".table");
    var parent_name = $(this).attr('data-parent');
    var find_parent_row = $('tr.parent-' + parent_name);
    var $this_row = $(this).closest('tr');

        $this_row.each(function() {
            $(this).find('input').each(function(i){        
                totals[i]+=parseInt( $(this).val());
                console.log(totals[i]);
                var eVal = (isNaN(totals[i])) ? 0 : totals[i];
                $(find_parent_row).find('input').eq(i).val(eVal);
            });

        });

    });



});

Upvotes: 1

Views: 329

Answers (1)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try

fiddle Demo

$(function () {
    $('[class*="parent-"] input').attr('readonly', true);
    $('input[type=text]').on('blur', function () {
        var totals = [0, 0, 0];
        var $dataRows = $(".table");
        var parent_name = $(this).data('parent');
        var 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];
        });
    });
});

Upvotes: 1

Related Questions