jquery - 获取表格总数

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>

我想获取每一行的总数并将其更新为最后一个 tr 中的总字段。

我如何用 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();
    });

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