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/

请注意，jQuery 1.7中不推荐使用live方法，并且在jQuery 1.9中删除了该方法，在上面的示例中我使用了on方法。基于所提出的代码，如果您使用的是没有on方法的jQuery的旧版本使用click方法，则无需使用事件委派技术。如果您确实需要使用live或delegate方法委派活动。

jQuery按多列过滤表行

1 个答案: