从父行中减去

时间:2013-12-10 09:11:27

标签: jquery jquery-calculation

我正在尝试减去父标题行的值(它们是各自子行的总和),但它只是在显示减号时继续添加。我该如何减去?

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

1 个答案:

答案 0 :(得分: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
    });
});

<小时/> 或

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

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