3

打撃は、テーブルの基本的なフィルター検索です。現在、テーブル全体 (thead & tbody) をフィルタリングして検索します。このスクリプトで tbody だけを検索する方法はありますか? フィルタリングされた結果から thead を除外したいので、タグの代わりに "id="kwd_search"" を追加しようとしましたが、スクリプトが機能しなくなります。もう 1 つやりたくないのは、結果が見つかったときにテーブルの行を小さくスケーリングすることです。

どんな助けでも大歓迎です。読んでくれてありがとう。 これが私が持っているもののライブデモです。私はこれが本当に遅いので、それほど問題がなければ、ライブの例を取り戻すことができれば本当にうれしいです.

// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> 
$(document).ready(function(){
    // Write on keyup event of keyword input element
    $("#kwd_search").keyup(function(){
        // When value of the input is not blank
        if( $(this).val() != "")
        {
            // Show only matching TR, hide rest of them
            $("#my-table tbody>tr").hide();
            $("#my-table td:contains-ci('" + $(this).val() + "')").parent("tr").show();
        }
        else
        {
            // When there is no input or clean again, show everything back
            $("#my-table tbody>tr").show();
        }
    });
});
// jQuery expression for case-insensitive filter
$.extend($.expr[":"], 
{
    "contains-ci": function(elem, i, match, array) 
    {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});
4

1 に答える 1

4

contains-ciアプローチをデバッグする気がしませんでした。と置き換えることができますfilter()

// When document is ready: this gets fired before body onload <img src='http://blogs.digitss.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> 
$(document).ready(function() {
     /* cache td elements to improve search performance*/
      var $rows=$("#my-table tbody>tr"), $cells=$rows.children();
    // Write on keyup event of keyword input element
    $("#kwd_search").keyup(function() {
        var term = $(this).val()
        // When value of the input is not blank
        if(term != "") {
            // Show only matching TR, hide rest of them
            $rows.hide();
            $cells.filter(function() {
                return $(this).text().toLowerCase().indexOf(term) > -1;
            }).parent("tr").show();
        } else {
            // When there is no input or clean again, show everything back
            $rows.show();
        }
    });
});

デモ：http：//jsfiddle.net/aPLLF/2/

于 2013-01-19T22:23:35.307 に答える