如何计算过滤表上的总计?

时间:2012-06-25 07:27:00

标签: javascript jquery

我刚刚创建了一个包含超过30行数据的大表,可以通过其列 - 名称列进行过滤。 过滤器的作用是 - 它将style="display: none;"放入TR标记。

我的问题是 - 如何创建一个只计算非“display:none”行的Grand Total行?

以下是我的表格示例:

<table class="sortable TF" id="table1" border="1">
    <thead>
        <tr class="fltrow">
            <td>
                <input class="flt" ct="0" id="flt0_table1" type="text">
            </td>
            <td>
                <input class="flt" ct="1" id="flt1_table1" type="text">
            </td>
            <td>
                <input class="flt" ct="2" id="flt2_table1" type="text">
            </td>
            <td>
                <input class="flt" ct="3" id="flt3_table1" type="text">
            </td>
        </tr>
        <tr>
            <th class="head_row">Person</th>
            <th class="head_row">Monthly pay</th>
            <th class="head_row">Monthly pay1</th>
            <th class="head_row">Monthly pay2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Steve Nicol</td>
            <td>8,500</td>
            <td>51,000</td>
            <td>1,000</td>
        </tr>
        <tr>
            <td>Steve McMahon</td>
            <td>9,200</td>
            <td>3,000</td>
            <td>2,000</td>
        </tr>
        <tr style="display: none;">
            <td>Jan Molby</td>
            <td>12,000</td>
            <td>4,000</td>
            <td>11,000</td>
        </tr>
        <tr style="display: none;">
            <td>John Barnes</td>
            <td>15,300</td>
            <td>200</td>
            <td>12,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Grand TOTAL</td>
            <td>???</td>
            <td>???</td>
            <td>???</td>
        </tr>
    </tfoot>
</table>

1 个答案:

答案 0 :(得分:2)

var sum = [0, 0, 0];
$('table.sortable tbody tr:visible').each(function() {
    sum[0] += parseInt($('td:eq(1)', this).text().replace(',', ''), 10);
    sum[1] += parseInt($('td:eq(2)', this).text().replace(',', ''), 10);
    sum[2] += parseInt($('td:eq(3)', this).text().replace(',', ''), 10);
});

$('table.sortable tfoot tr td:gt(0)').each(function(i) {
    var text = sum[i].toString();
    if (text.length > 3) {  // checking length for 3 to insert comma
        text = text.replace(/(\S{3}$)/, ",$1");
    }
    $(this).text(text);
});

<强> DEMO

但如果删除逗号,则更改为:

$('table.sortable tfoot tr td:gt(0)').each(function(i) {
    $(this).text(sum[i]);
});

<强> DEMO