计算 table 中所选项目的总计

Question

我有 3 个表，每个表都有多行。我需要找到一种方法来计算某些列的总数。每行都有一个复选框，因此基本上，当检查此功能时，我需要能够将该行值添加到总数。

我目前有这个，它是将每一列的总计相加，我只是不知道如何只在选中复选框时才更新总计，如果取消选择则从总计中删除。

Table 示例...

<table class="transfer-group-table table table-hover tablesorter">
<thead>
    <tr>
        <th>Name</th>
        <th>Invoice #</th>
        <th>Invoice Amount</th>
        <th>Order Status</th>
        <th>Payment Menthod</th>
        <th>Service Fee</th>
        <th>Funding Fee</th>
        <th>Delivery Date</th>
        <th>Transfer Amount</th>
        <th></th>
    </tr>
</thead>
<tbody>
    <tr id="2942">

        <td>
            <p>A Company Ltd</p>
        </td>
        <td>
            <p>18602</p>
        </td>
        <td class="AmountLoaned">
            <p>324.00</p>
        </td>
        <td>
            <p>Completed </p>
        </td>
        <td>
            <p>BACS</p>
        </td>
        <td class="ServiceCharge">
            <p>0.04</p>
        </td>
        <td class="FeeAmount">
            <p>4.54</p>
        </td>
        <td>
            <p>May 29, 2015</p>
        </td>
        <td class="TransferAmount">
            <p>2.50</p>
        </td>
        <td>
            <input type="checkbox" class="totalamountcb">
        </td>
    </tr>
</tbody>

JavaScript...

// Calculate the total invoice amount from selected items only
function calculateInvoiceTotals() {
var Sum = 0;
// iterate through each td based on class and add the values
$(".AmountLoaned").each(function () {

    var value = $(this).text();
    // add only if the value is number
    if (!isNaN(value) && value.length != 0) {
        Sum += parseFloat(value);
    }
});
$('#TotalInvoiceAmt').text(Sum.toFixed(2));
};
// Calculate the total transfer amount from selected items only
function calculateTransferTotals() {
var Sum = 0;
$(".TransferAmount").each(function () {

    var value = $(this).text();
    // add only if the value is number
    if (!isNaN(value) && value.length != 0) {
        Sum += parseFloat(value);
    }
});
$('#TotalTransferAmt').text(Sum.toFixed(2));
};

Answer 1

遍历使用$.fn.closest() to tr then $.fn.find() the checkbox using $.fn.is()你可以检查复选框是否被选中。

if($(this).closest('tr').find(':checkbox').is(':checked')){
    //Perform addition 
}

完整代码

// Calculate the total invoice amount from selected items only
function calculateInvoiceTotals() {
    var Sum = 0;
    // iterate through each td based on class and add the values
    $(".AmountLoaned").each(function() {
        //Check if the checkbox is checked
        if ($(this).closest('tr').find(':checkbox').is(':checked')) {
            var value = $(this).text();
            // add only if the value is number
            if (!isNaN(value) && value.length != 0) {
                Sum += parseFloat(value);
            }
        }
    });
    $('#TotalInvoiceAmt').text(Sum.toFixed(2));
};
// Calculate the total transfer amount from selected items only
function calculateTransferTotals() {
    var Sum = 0;
    $(".TransferAmount").each(function() {
        //Check if the checkbox is checked
        if ($(this).closest('tr').find(':checkbox').is(':checked')) {
            var value = $(this).text();
            // add only if the value is number
            if (!isNaN(value) && value.length != 0) {
                Sum += parseFloat(value);
            }
        }
    });
    $('#TotalTransferAmt').text(Sum.toFixed(2));
};

DEMO

计算 table 中所选项目的总计

Calculate total for selected items in a table

javascript

jquery

html-table