jQuery 按多列过滤表格行

Question

这是我生成表格的 PHP 脚本：

$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>";

我的 jQuery 脚本：

$('#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();
        }
    });

过滤器只对一个列起作用，但是当我同时对多个列应用过滤器时它不起作用，例如不同列的字段之间的'AND'条件。

有人可以帮助我吗？

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/

请注意，live 方法在 jQuery 1.7 中已弃用并在 jQuery 1.9 中删除，在上面的示例中，我使用了 on 方法。根据提出的代码，甚至不需要使用事件委托技术，如果您使用的是没有 on 方法的旧版本的 jQuery 之一，请使用 click 方法。如果您确实需要委托事件，请使用live 或delegate 方法。