jquery - 计算列的总和

Question

我有一个表格，其中的列有两个输入字段。我想计算子行的第一个输入字段的总和，并将与列的父行的第一个输入字段对应的总数相加。

现在使用代码，它确实加起来正确，但它没有在父行的正确输入字段中设置总计（即在父行的相应输入字段中）。

请参阅jsFiddle。

更新小提琴

代码：

HTML：

<table>
    <tr class="parent-realtor percent-text">
        <td>
            <h5>Realtor Percent</h5>
        </td>
        <td>
            <input type="text" class="percent-total" /> //parent
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //parent
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //parent
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
        <td>
            <input type="text" class="percent-total" /> //parent
            <input type="text" onfocus="this.blur()" class="percent-data" />
        </td>
    </tr>
    <tr>
        <td>
            <h6>Contract Amount</h6>
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
        <td>
            <input type="text" data-parent="realtor" />
        </td>
    </tr>
    <tr class="percent-text">
        <td>
            <h6>Buyer's Agent</h6>
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
    </tr>
    <tr class="percent-text">
        <td>
            <h6>Seller's Agent</h6>
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
        <td>
            <input type="text" data-parent="realtor" class="percent" /> //child
            <input type="text" data-parent="realtor" class="percent-data r" onfocus="this.blur()" />
        </td>
    </tr>
</table>

jQuery：

$('.percent').on('keyup', function () {
    //calcRealtor();
    var totals = [0, 0, 0, 0, 0, 0, 0, 0],
        parent_name = $(this).data('parent'),
        find_parent_row = $('tr.parent-realtor');
    find_parent_row.nextUntil('[class="parent-realtor"]').find('input[data-parent="realtor"]').each(function () {
        totals[$(this).parent('td').index() / 1 - 1] += +this.value;
    });
    find_parent_row.find('input').each(function (i) {
        this.value = totals[i];
    });

});

Answer 1

假设

1. 您将有多个组，例如同一table元素中的示例
2. 您可以contract向tr保存合同输入的类添加一个类

尝试

$('table').on('keyup', '.percent', function(){
               // self holds a reference to the input we entered data
    var self = $(this), 
                  // we then find the containing tr element and then find the corresponding `parent-realtor` row and cache it in realtor variable
        realtor = self.closest('tr').prevAll('.parent-realtor').first(),
                // we cache a reference to the all tr rows that interest us
        group = realtor.nextUntil('.parent-realtor'),
                    // we filter the contract inputs
        contracts = group.filter('.contract').find('input'),
                   // and we filter the input elements that will be added to the contracts
        percents = group.filter('.percent-text');

    // for each contract
    contracts.each(function(idx){  // idx holds the index of the contract input
        // gets its value. the + converts it to an number
        var final = +this.value;
        // for each row of elements to add
        percents.each(function(){
            // find the input element that we are interested
            // meaning the one with the same index as our contract input
            // and get its value
            var extra = +$(this).find('input.percent').eq(idx).val();

            // add it to the total of this contracts
            final += extra;
        });

        // find the input that holds the total (based on index again)
        // and assign the total value we just calculated
        realtor.find('input.percent-total').eq(idx).val(final);
    });
});

演示在 http://jsfiddle.net/gaby/R5Cjw/2/

---

而不是设置onfocus="this.blur()"，您可以设置为readonly并完成。

您还可以命名（使用一些唯一值）每个房地产经纪人输入字段并将该值赋予每个相应的输入元素，以便您可以更轻松地匹配它们。