Calculate sum of all columns

问题:

I want to calculate the sum total of the parent rows in all the columns. Here's what I'm doing right now [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">
                <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">
                <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);
    $('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);
        var $total_row = $('.total');
        var total = 0;
        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];

            var tVal = parseFloat ( totals[i] );
            if (tVal) {
                total += tVal;
                $total_row.find('input').eq(i).val( total );
            }
        });
    });
});

What this does is that it will display the last calculated value of the parent row and not add them all like it should.

回答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

var total_par = $('tr.total');
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;
    });
    $(this).find('input').val(function (i) {
        return totals[i];
    });
});