CODEWITHSUNDEEP
javascriptjqueryhtml
Kenci
Kenci

Reputation: 4882

How to group table rows and filter the groups with jQuery or JavaScript?

I am using <tbody> to group table rows. My table looks like this:

<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>​

You can see an example here:

http://jsfiddle.net/zDA7n/

How is it possible to filter the table, so that when i write a search string in the "kwd_search" input field, it will hide everything but the <tbody> group that contains the search-text in it's first column (Valgsted) ?

Upvotes: 1

Views: 3639

Answers (1)

Blazemonger
Blazemonger

Reputation: 92943

Use the :contains selector (note: this is case-sensitive):

$('#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/

For a case-insensitive version, you'll need to implement a custom version of the :contains selector.

Upvotes: 1

Related Questions