javascript - 如何使用 jQuery 或 JavaScript 对表行进行分组并过滤组？

Question

我正在使用<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) 中包含搜索文本的组？

Answer 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/

对于不区分大小写的版本，您需要implement a custom version of the :contains selector .