使用JQuery更新输入字段

我有一个表，其中包含使用JQuery垂直和水平求和的输入。底部的行对前两列进行合计，然后在

输入中对其合计进行合计。问题是

没有更新，因为用户没有与“total_sales1”和“total_sales2”输入交互

我使用的脚本如下所示：

$(window).load(function(){
    $(':input').bind('keypress keydown keyup change',function(){
        var $div = $(this).closest('tr');
        var postpaid = parseFloat($div.find(':input[name*="_postpaid"]').val(),10),
            hup = parseFloat($div.find(':input[name*="_hup"]').val(),10);

        if (isNaN(postpaid)) postpaid = 0;
        if (isNaN(hup)) hup = 0;

        var v = '';

        if (!isNaN(postpaid) && !isNaN(hup)){
            v = (postpaid + hup);
        }
        $div.find(':input[name*="_total"]').val(v.toString());
    });
});

这个表看起来是这样的：

<tr>
    <td>Category 1</td>
    <td>
        <input type="text" name="category1_sales1" class="numbox">
    </td>
    <td>
        <input type="text" name="category1_sales2" class="numbox">
    </td>
    <td>
        <input type="text" name="category1_total" class="numbox_dark" readonly>
    </td>
</tr>

<tr>
    <td>Category 2</td>
    <td>
        <input type="text" name="category2_sales1" class="numbox">
    </td>
    <td>
        <input type="text" name="category2_sales2" class="numbox">
    </td>
    <td>
        <input type="text" name="category2_total" class="numbox_dark" readonly>
    </td>
</tr>

<tr>
    <td><strong>TOTAL</strong></td>
    <td>
        <input type="text" name="total_sales1" class="numbox_dark" readonly>
    </td>
    <td>
        <input type="text" name="total_sales2" class="numbox_dark" readonly>
    </td>
    <td>
        <input type="text" name="grand_total" class="numbox_dark" readonly>
    </td>
</tr>

第一类
第2类
总计

当条目位于前两行时，如何更新“grand_total”？

下面是一个JSFIDLE，其中包含您的答案： 您需要一个

updateTotals

函数，如图所示。。。仓促编写，但很容易进一步优化：

function updateTotals() {
    var sales1 = 0
    var sales2 = 0

    $(':input[name*="_sales1"]').each(function(){
        if (isNaN(parseFloat($(this).val()))) sales1 += 0;
        else sales1 += parseFloat($(this).val())
    });

    $(':input[name*="_sales2"]').each(function(){
        if (isNaN(parseFloat($(this).val()))) sales2 += 0;
        else sales2 += parseFloat($(this).val())
    });

    $('#total_sales1').val(sales1)
    $('#total_sales2').val(sales2)

    $('#grand_total').val(sales1+sales2)
}

这是在

bind

调用过程中调用的，在末尾：

updateTotals（）

这还需要更改HTML。。。特别是最后一行：

<tr id="totals">
    <td><strong>TOTAL</strong></td>
    <td>
        <input type="text" id="total_sales1" class="numbox_dark" readonly>
    </td>
    <td>
        <input type="text" id="total_sales2" class="numbox_dark" readonly>
    </td>
    <td>
        <input type="text" id="grand_total" class="numbox_dark" readonly>
    </td>
</tr>


总计
下面为您解决了所有问题。需要进行一些更改/添加。工作示例中包括小提琴