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/

对于不区分大小写的版本，您需要实现:contains选择器的自定义版本。