計算表中所選項目的總計

Question

我有3個表，每個表都有多行。 我需要找到一種方法來計算某些列的總數。 每行都有一個復選框，因此基本上，當選中此復選框時，我需要能夠將該行值添加到總計中。

我目前有這個，它將每一列的總計加起來，我只是想不出如何僅在選中復選框后更新總計，如果取消選中則從總計中刪除該總計方法。

表示例...

<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()到tr然后$.fn.find()的checkbox使用$.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