使用JQuery更新输入字段

Question

我有一个表格，其输入使用JQuery进行垂直和水平求和。底行总计前两列，然后应该在<input type="text" name="grand_total" class="numbox_dark" readonly>输入中对它们的总和求和。问题是<input type="text" name="grand_total" class="numbox_dark" readonly>没有更新，因为没有用户与“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>

如何在前两行输入条目时更新“grand_total”？

Answer 1

以下是您的回答：http://jsfiddle.net/digitalextremist/nSLpz/

你需要一个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>