44

入力フィールドに基づいてテーブルのフィルタリングを行う Jquery スクリプトを見つけました。このスクリプトは、基本的にフィルタを取得し、各単語を分割し、テーブルの行を各単語でフィルタリングします。最後に、入力フィールドにすべての単語を含む行のリストが表示されます。

http://www.marceble.com/2010/02/simple-jquery-table-row-filter/

var data = this.value.split(" ");

$.each(data, function(i, v){
     jo = jo.filter("*:contains('"+v+"')");
});

ここで必要なのは、入力フィールド内の各単語を含む行をフィルタリングする代わりに、それです。入力フィールドに少なくとも 1 つの単語を含むすべての行をフィルター処理したいと考えています。

私が試した1つの方法は、フィルタリングされた各リストを配列に入れることです...

  var rows = new Array();

 $.each(data, function(i, v){
     rows[i] = jo.filter("*:contains('"+v+"')");
 });

この段階で、「rows」配列内のすべての行の UNION を作成して表示する必要があります。それを正確に行う方法がわかりません。

上記のスクリプトの動作 - http://marceble.com/2010/jqueryfilter/index.html?TB_iframe=true&width=720&height=540

フィルターに「cat six」と入力すると、3 つの行が表示されます。

4

9 に答える 9

88

このjsfiddleを見てください。

アイデアは、単語をループする関数で行をフィルタリングすることです。

jo.filter(function (i, v) {
    var $t = $(this);
    for (var d = 0; d < data.length; ++d) {
        if ($t.is(":contains('" + data[d] + "')")) {
            return true;
        }
    }
    return false;
})
//show the rows that match.
.show();

編集:セレクターを使用して大文字と小文字を区別しないフィルタリングを実現することはできませんが:contains()、幸いなことにtext()機能があるため、フィルター文字列を大文字にし、条件を に変更する必要がありますif ($t.text().toUpperCase().indexOf(data[d]) > -1)。このjsfiddleを見てください。

于 2013-06-12T20:52:28.323 に答える
29

配列を構築する必要はありません。DOM を直接アドレス指定できます。

試す ：

rows.hide();
$.each(data, function(i, v){
    rows.filter(":contains('" + v + "')").show();
});

デモ

編集

すぐに表示せずに適切な行を検出するには、それらを function に渡します。

$("#searchInput").keyup(function() {
    var rows = $("#fbody").find("tr").hide();
    var data = this.value.split(" ");
    var _rows = $();//an empty jQuery collection
    $.each(data, function(i, v) {
        _rows.add(rows.filter(":contains('" + v + "')");
    });
    myFunction(_rows);
});

更新されたデモ

于 2013-06-12T20:49:25.173 に答える
5

私は@nrodicの答えを選びました（ちなみにありがとうございます）が、いくつかの欠点があります：

1) 「cat」、「dog」、「mouse」、「cat dog」、「cat dog mouse」(それぞれ別の行) を含む行がある場合、「cat dog mouse」を明示的に検索すると、 「ねこ」「いぬ」「ねずみ」「ねこいぬ」「ねこいぬねずみ」の行が表示されます。

2) .toLowerCase() が実装されていませんでした。つまり、小文字の文字列を入力すると、大文字のテキストが一致する行は表示されません。

そこで、@nrodic のコードのフォークを思いつきました。 

var data = this.value; //plain text, not an array

と

jo.filter(function (i, v) {
    var $t = $(this);
    var stringsFromRowNodes = $t.children("td:nth-child(n)")
    .text().toLowerCase();
    var searchText = data.toLowerCase();
    if (stringsFromRowNodes.contains(searchText)) {
        return true;
        }
    return false;
})
//show the rows that match.
.show();

ここに完全なコードがあります：http://jsfiddle.net/jumasheff/081qyf3s/

于 2015-01-12T10:03:38.457 に答える
4

@CanalDoMestreの回答に基づいています。空のフィルター ケースのサポートを追加し、タイプミスを修正し、行を非表示にしないようにして、列ヘッダーを引き続き表示できるようにしました。

    $("#filterby").on('keyup', function() {
        if (this.value.length < 1) {
            $("#list tr").css("display", "");
        } else {
            $("#list tbody tr:not(:contains('"+this.value+"'))").css("display", "none");
            $("#list tbody tr:contains('"+this.value+"')").css("display", "");
        }
    });
于 2014-02-12T21:56:50.813 に答える
3

私は非常に単純な機能を持っています:

function busca(busca){
    $("#listagem tr:not(contains('"+busca+"'))").css("display", "none");
    $("#listagem tr:contains('"+busca+"')").css("display", "");
}
于 2013-11-05T23:23:05.110 に答える
1

Beetroot-Betroot のソリューションを使用しましたが、contains を使用する代わりに、containsNC を使用したため、大文字と小文字が区別されません。

$.extend($.expr[":"], {
"containsNC": function(elem, i, match, array) {
return (elem.textContent || elem.innerText ||
"").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
于 2016-09-12T15:25:57.017 に答える