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

计算表格中所选项目的总计

1 个答案: