计算列的总和

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>

j查询：

$('.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 并完成。

您也可以命名（具有一些唯一值）每个房地产经纪人输入字段，并将该值提供给每个相应的输入元素，以便您可以更轻松地匹配它们。