1

<tbody>テーブルの行をグループ化するために使用しています。私のテーブルは次のようになります。

<label for="kwd_search">Search:</label> <input type="text" id="kwd_search" value=""/>

<br /><br />

<table id="indberetningstable" style="text-align: center; border: solid; align: center">

    <thead>
        <tr>
            <th>Valgsted</th>
            <th>Parti</th>
            <th>Stemmer</th>
            <th>Gem</th>
        </tr>
    </thead>

        <tbody>
            <tr>
                <td>Idrætshuset</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
                <tr>
                    <td></td>
                    <td>A          - Socialdemokraterne</td>
                    <td><input type="text" style="width: 175px"></td>
                    <td><input type="submit" value="Gem"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>B          - Det Radikale Venstre</td>
                    <td><input type="text" style="width: 175px"></td>
                    <td><input type="submit" value="Gem"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>C          - Det Konservative Folkeparti</td>
                    <td><input type="text" style="width: 175px"></td>
                    <td><input type="submit" value="Gem"></td>
                </tr>

        </tbody>
        <tbody>
            <tr>
                <td>Strandvejsskolen</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
                <tr>
                    <td></td>
                    <td>A          - Socialdemokraterne</td>
                    <td><input type="text" style="width: 175px"></td>
                    <td><input type="submit" value="Gem"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>B          - Det Radikale Venstre</td>
                    <td><input type="text" style="width: 175px"></td>
                    <td><input type="submit" value="Gem"></td>
                </tr>
                <tr>
                    <td></td>
                    <td>C          - Det Konservative Folkeparti</td>
                    <td><input type="text" style="width: 175px"></td>
                    <td><input type="submit" value="Gem"></td>
                </tr>

        </tbody>

</table>​

ここで例を見ることができます：

http://jsfiddle.net/zDA7n/

"kwd_search"入力フィールドに検索文字列を書き込むと、<tbody>最初の列 (Valgsted) に検索テキストを含むグループ以外のすべてが非表示になるように、テーブルをフィルタリングするにはどうすればよいですか?

4

1 に答える 1

1

セレクターを使用します:contains(注: 大文字と小文字が区別されます)。

$('#kwd_search').on('change',function() {
    var val = $.trim($(this).val());
    $('#indberetningstable tbody').show();
    if (val) {
        $('#indberetningstable tbody:not(:contains("'+val+'"))').hide();
    };
});​

http://jsfiddle.net/mblase75/pEfSF/

大文字と小文字を区別しないバージョンの場合、セレクターのカスタム バージョンを実装する:contains必要があります。

于 2012-10-31T13:46:56.010 に答える