Jquery table get total

Question

I have writen an function to get the totals of certain rows.

The function works ok, but I have one problem It does not count the rows which are filtered/selected on the table change but all the rows.

I don't know how that can be because when I look in the html source, only 5 rows are there and the functions counts all 25 rows before the filter.

Jquery :

$("#mainTable").change(function(){  
    var element = $(this),
    footer = element.find('tfoot tr'),
    dataRows = element.find('tbody tr'),
    initialTotal = function () {
        var column, total;
        //for (column = 1; column < footer.children().size(); column++) {
            for (column = 3; column < 4; column++) {

            total = 0;
            dataRows.each(function () {
                var row = $(this);
                total += parseFloat(row.children().eq(column).text());
            });
            footer.children().eq(column).text(total);
        };
    };
    initialTotal();
});

Example page :

/

As you can see when you select "PARTIJ" 0/1/2 it executes the count function and gives total but total for all rows and not only the selected "PARTIJ".

Answer 1

Try changing line:

dataRows = element.find('tbody tr'),

to

dataRows = element.find('tbody tr:visible'),

which applies the :visible selector