Filter table information using jquery

Question

I've got this nested table and I'm trying to write a javascript that shows only the information that I want to show.

Here's an example (albeit ugly):

And here's the table markup:

<table>
    <tr>
        <td>R1C1</td>
        <td>R1C2</td>
        <td>
            <table class="subtable">
                <tr>
                    <td rowspan=3 class="Category">
                        Fruits
                    </td>
                    <td class="SubItem">
                        Apple
                    </td>
                </tr>
                <tr>
                    <td class="SubItem">
                        Banana
                    </td>
                </tr>
                <tr>
                    <td class="SubItem">
                        Pear
                    </td>
                </tr>
                <tr>
                    <td rowspan=3 class="Category">
                        Countries
                    </td>
                    <td class="SubItem">
                        Norway
                    </td>
                </tr>
                <tr>
                    <td class="SubItem">
                        Finland
                    </td>
                </tr>
                <tr>
                    <td class="SubItem">
                        Sweden
                    </td>
                </tr>
            </table>
        </td>
    </tr>
        <tr>
        <td>R2C1</td>
        <td>R2C2</td>
        <td>
            <table class="subtable">
                <tr>
                    <td rowspan=3 class="Category">
                        Cars
                    </td>
                    <td class="SubItem">
                        Volvo
                    </td>
                </tr>
                <tr>
                    <td class="SubItem">
                        Ford
                    </td>
                </tr>
                <tr>
                    <td class="SubItem">
                        BMW
                    </td>
                </tr>
                <tr>
                    <td rowspan=3 class="Category">
                        Cities
                    </td>
                    <td class="SubItem">
                        Stockholm
                    </td>
                </tr>
                <tr>
                    <td class="SubItem">
                        Helsinki
                    </td>
                </tr>
                <tr>
                    <td class="SubItem">
                        Ulan batur
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

So what I want is the following:

If I search for BMW I want to show "R2C1", "R2C2", "Cars", Volvo, Ford and BMW". If I search for Cars I want to show "R2C1", "R2C2", "Cars", Volvo, Ford and BMW".

Simply put, I want to show column 1, 2 and omit everything in column 3 except for the relevant information.

Now I wish I could say that I have started writing on this, but frankly I don't even know where to start. I would google but since this is one of those "I-don't-even-know-what-to-search-for" I'm putting it out here.

There is no need for any complete solutions, just a nudge in the right direction.

http://jsfiddle.net/ku1cnthh/1/

Thanks for any help and please let me know if there's some information missing.

/Patrik

This other question might help you: http://stackoverflow.com/questions/4325066/searching-html-table — Jasper, Jul 26 '15 at 19:41
Also this: http://stackoverflow.com/questions/17074687/filtering-table-rows-using-jquery — ilans, Jul 26 '15 at 19:42

score 2 · Answer 1 · answered Jul 26 '15 at 19:48

Check your fiddle, maybe it will give you some kind of direction:

table doen't change its size but has empty cells $('.subtable').css('visibility', 'hidden')
table doen't change its size $('.subtable').css('visibility', 'hidden') + moving class to the parent
table changes its size but has no empty cells $('.subtable').hide() + moving class to the parent

Filter table information using jquery

1 Answers1