Question

我有一个html表，如下所示，我还可以选择动态添加行。

                            <tbody>
                            <tr style="display: none" id="invoiceRow">
                                <td><textarea></textarea></td>
                                <td class="va_middle"><input type="text" name="quantity" class="mini" /></td>
                                <td class="va_middle"><input type="text" name="rate" class="mini" /></td>
                                <td class="va_middle"><input type="text" name="amount" class="mini" /></td>
                                <td>
                                    <a onclick="deleteInvoiceRow(this);" class="btn btn-small">
                                        <i class="icon-remove"></i>                     
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td><textarea></textarea></td>
                                <td class="va_middle"><input type="text" name="quantity" class="mini" /></td>
                                <td class="va_middle"><input type="text" name="rate" class="mini" /></td>
                                <td class="va_middle"><input type="text" name="amount" class="mini" /></td>
                                <td>
                                    <a onclick="deleteInvoiceRow(this);" class="btn btn-small">
                                        <i class="icon-remove"></i>                     
                                    </a>
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2"><a onclick="addNewInvoiceRow();"><i class="icon-plus-sign right"></i></a></td>
                                <td class="va_middle" colspan="3">&nbsp; <strong>Total: &nbsp; &nbsp;</strong><input type="text" name="rate" class="total" /></td>
                            </tr>
                        </tbody>

我希望得到每一行的总数，并将其更新为最后一行中的总字段。

我如何使用jQuery？并更新值的变化值。

Answer 1

我将这样做是通过向TABLE标签添加几个监听器，并且我假设名为“amount”的输入将等于“rate”乘以“quantity”的乘积。代码看起来像：

function calcTotalTable() {
    var total = 0;
    $('my_table input[name="amount"]').each(function(){
        // add some validation
        total += $j(this).val();
    });

    $('my_table input.total').val(total);
}

$('my_table').on('change', 'input[type="text"]', function() {
    var $row = $(this).closest('tr'),
        // you may need to add some validation before the calculation
        total = $row.find('input[name="quantity"]').val() * $row.find('input[name="rate"]').val();
    $row.find('input[name="amount"]').val(total);
    calcTotalTable();
}).on('click', 'a.btn btn-small', function() { // theses will handle the delete btn
        $(this).closest('tr').remove();
        calcTotalTable();
    });

当然，您需要处理验证和格式化，但代码将执行基本过程。我没有测试这段代码，但会给你一般的想法。我希望有所帮助，最好！

得到表总数

1 个答案: