5

次のような標準のHTMLテーブル構造があると仮定します。

<table class="table table-striped table-hover table-bordered table-condensed">
<thead>
    <tr>
        <th>Name</th>
        <th>Type</th>
        <th>Added</th>
    </tr>
</thead>
<tbody>
    <tr id="1a0daa2734" class="item">
        <td><a href="/view/1a0daa2734">Item Number 1</a></td>
        <td>A</td>
        <td>8/1/2012 10:18:34 PM</td>
    </tr>
    <tr id="b1ff6e0ac" class="item">
        <td><a href="/view/b1ff6e0ac">Item Number 2</a></td>
        <td>B</td>
        <td>8/2/2012 5:48:54 PM</td>
    </tr>
    <tr id="edd8b70893" class="item">
        <td><a href="/view/edd8b70893">Item Number 3</a></td>
        <td>A</td>
        <td>8/13/2012 3:55:41 PM</td>
    </tr>
</tbody>
</table>

jQueryを使用してクライアント側の検索を作成しようとしています。基本的に、IDが。の検索ボックスがありsearch-itemsます。

    $("#search-items").bind("keyup paste", function() {
        var searchText = $("#search-items").val(); 

        $(".item").each(function() {
             //???
        });
    });

tbody内のNON-MATCHESsearch-itemsの検索値を取得し、見つけるための最良の方法は何ですか？それらは私が隠す要素であるため、私は不一致が欲しいです。

td最初の2つの要素内のみを検索する必要があるため、nameおよびtype列は追加されません。

ありがとう。

4

3 に答える 3

7

次のコードは、入力した値を column1 または 2 に一致させようとします。

$("#search").on("keyup paste", function() {
    var value = $(this).val().toUpperCase();
    var $rows = $("table tr");

    if(value === ''){
        $rows.show();
        return false;
    }

    $rows.each(function(index) {
        if (index !== 0) {

            $row = $(this);

            var column1 = $row.find("td:first a").html().toUpperCase();
            var column2 = $row.find("td").eq(1).text().toUpperCase();

            if ((column1.indexOf(value) > -1) || (column2.indexOf(value) > -1)) {
                $row.show();
            }
            else {
                $row.hide();
            }
        }
    });
});​

デモ- 列 1 と 2 の値で個別にテーブルを検索する (追加されていない)

もっと効率的な書き方があると思いますが、これで始められるはずです。

于 2012-09-15T01:45:54.667 に答える
3

このようなものはどうですか？

function escapeRegex(value) {
    return value.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&");
}

$(function() {
    $("#search-items").bind("keyup paste", function() {
        var searchText = $("#search-items").val(),
            regex = new RegExp(escapeRegex(searchText), "gi"),
            $items = $(".item").show();

        if (searchText) {
            $items.each(function() {
                var $tds = $("td", this).slice(0, 2), // only the first two columns
                    text = $tds.text();

                if (text.search(regex) === -1) {
                    $(this).hide();
                }

            });
        }
    });
});​

例: http://jsfiddle.net/Pc7Nk/1/

escapeRegex関数は、jQueryUI オートコンプリートのソース コードから恥知らずに盗用されました。

于 2012-09-15T02:09:15.323 に答える
-1

行ごとに移動して、最初の td を見つけます (必要に応じて、一致させたい n 個の td 要素を追加することもできます。.text() は、文字列オブジェクトの .search メソッドを使用して文字列を返します。インデックスを返します。最初の一致の場合、一致がなかった場合は -1 が返されるため、行を非表示にします。

$("#search-items").bind("keyup paste", function() {
    var searchText = $("#search-items").val(); 

    $(".item").each(function() {
         var $this = $(this)
         if ($this.find('td:first-child').text().search(searchText) === -1) {
             $this.hide()
         }
    });
});
于 2012-09-15T01:45:42.767 に答える