Question

I have just create a large table with more than 30 rows of data, witch can be filtered by on of its column – the Name column.
The thing that the filter do is – it is putting style="display: none;" into the TR tag.

My question is – how to create a Grand Total row that sum only the non “display: none” rows?

Here is a sample of my table:

<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>

Answer 1

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

But if you remove comma then change is:

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

DEMO