jQuery filter table rows by multiple columns

Question

This is my PHP script to generate the table:

$products = get_db( "SELECT * FROM `products` ORDER BY Data desc" );

echo '<form id="productsEdit" action="actions.php" method="get" />';

echo "<table id='products'>";
    echo "<thead>";
        echo "<tr id='filter_table'>";
            echo "<th class='id'>Cod. prodotto<br><input type='text' class='id' /></th>";
            echo "<th class='articolo'>Articolo<br><input type='text' class='articolo' /></th>";
            echo "<th class='fornitore'>Fornitore<br><input type='text' class='fornitore' /></th>";
            echo "<th class='nome'>Nome<br><input type='text' class='nome' /></th>";
            echo "<th class='taglia'>Taglia<br><input type='text' class='taglia' /></th>";
            echo "<th class='colore'>Colore<br><input type='text' class='colore' /></th>";
            echo "<th class='prezzo_acquisto'>Prezzo acquisto<br><input type='text' class='prezzo_acquisto' /></th>";
            echo "<th class='prezzo_vendita'>Prezzo vendita<br><input type='text' class='prezzo_vendita' /></th>";
            echo "<th class='data'>Data<br><input type='text' class='data' /></th>";
            echo "<th class='q'>Qta<br><input type='text' class='q' /></th>";
            echo "<th class='qA'>QtaA<br><input type='text' class='qA' /></th>";
        echo "</tr>";
    echo "</thead>";
    echo "<tbody>";
    foreach ($products as $product) {
        echo "<tr class='prod_". $product['id'] ."'>";
            echo "<td class='id'>". $product['id'] ."</td>";
            echo "<td class='articolo'>". $product['articolo'] ."</td>";
            echo "<td class='fornitore'>". $product['fornitore'] ."</td>";
            echo "<td class='nome'>". $product['nome'] ."</td>";
            echo "<td class='taglia'>". $product['taglia'] ."</td>";
            echo "<td class='colore'>". $product['colore'] ."</td>";
            echo "<td class='prezzo_acquisto'>". $product['prezzo_acquisto'] ."</td>";
            echo "<td class='prezzo_vendita'>". $product['prezzo_vendita'] ."</td>";
            echo "<td class='data'>". $product['data'] ."</td>";
            echo "<td class='q'>". $product['quantita'] ."</td>";
            echo "<td class='qA'>". $product['qta_acquisto'] ."</td>";
        echo "</tr>";
    }
    echo "</tbody>";
echo "</table>";
echo "</form>";

My jQuery script:

$('#filter_table input').live("keyup", function() {
        var searchStr = $(this).val();
        var column = $(this).attr("class");

        if (searchStr.length > 0) {
            $('tbody > tr').hide();

            $('td.'+ column +':containsNC('+ searchStr +')').each(function(){
               $(this).parent("tr").show();
            });

        } else {
            $('tbody > tr').show();
        }
    });

The filter work only for a column, but it doesn't work when I apply filter on more columns in the same time, such as 'AND' condition between fields of different columns.

Can someone help me?

Answer 1

var $rows = $('tbody > tr'),
    $filters = $('#filter_table input'),
    cache, $m, len, cls;

$filters.on("keyup", function () {
    $m = $filters.filter(function () {
        return $.trim(this.value).length > 0;
    }), len = $m.length;

    if (len === 0) return $rows.show();

    cache = {};
    cls = '.' + $m.map(function () {
        cache[this.className] = $.trim(this.value);
        return this.className;
    }).get().join(',.');

    $rows.hide().filter(function () {
        return $('td', this).filter(cls).filter(function () {
            return this.textContent.indexOf(cache[this.className]) > -1;
        }).length === len;
    }).show();
});

http://jsfiddle.net/k47dkruh/

Note that live method was deprecated in jQuery 1.7 and removed in jQuery 1.9, in the above example I have used the on method. Based on the posed code there is no need to even use event delegation technique, if you are using one of the older versions of jQuery that doesn't have on method use the click method. If you really need to delegate the event use live or the delegate method.