1

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) ?

Kenci
  • 4,794
  • 15
  • 64
  • 108

1 Answers1

1

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.

Community
  • 1
  • 1
Blazemonger
  • 90,923
  • 26
  • 142
  • 180
  • Thanks alot ! Seems to work. Only problem is, when i write an "S" for the second tbody, it doesn't filter, unless i write "St" - any idea why? – Kenci Oct 31 '12 at 13:58
  • Would it be possible to make this functio not case sensitive? I tried the following, but doesnt work quite well when searching for "st": $.extend($.expr[':'], { 'contains': function (elem, i, match, array) { return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0; } }); – Kenci Oct 31 '12 at 14:10
  • Just found it it is because it looks in all columns, and there are other columns that contain "S" or "str" :/ - Any way to make it search only in the first td? – Kenci Oct 31 '12 at 14:12