使用jquery过滤表信息答案

【问题标题】：Filter table information using jquery使用jquery过滤表信息
【发布时间】：2015-07-27 03:48:16
【问题描述】：

我有这个嵌套表，我正在尝试编写一个仅显示我想要显示的信息的 javascript。

这是一个例子（虽然很丑）：

这是表格标记：

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

所以我想要的是以下内容：

如果我搜索 BMW，我想显示“R2C1”、“R2C2”、“Cars”、Volvo、Ford 和 BMW”。如果我搜索 Cars，我想显示“R2C1”、“R2C2”、“Cars”、Volvo、Ford 和 BMW”。

简单地说，我想显示第 1、2 列并省略第 3 列中除了相关信息之外的所有内容。

现在我希望我可以说我已经开始写这篇文章了，但坦率地说，我什至不知道从哪里开始。我会用谷歌搜索，但由于这是“我什至不知道要搜索什么”之一，所以我把它放在这里。

不需要任何完整的解决方案，只需朝着正确的方向轻推即可。

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

感谢您的帮助，如果缺少某些信息，请告诉我。

/帕特里克

【问题讨论】：

这个其他问题可能会对您有所帮助：stackoverflow.com/questions/4325066/searching-html-table
还有这个：stackoverflow.com/questions/17074687/…
谢谢，他们真的帮了大忙！

标签： jquery filter html-table

【解决方案1】：

检查你的小提琴，也许它会给你一些方向：

table doen't change its size but has empty cells$('.subtable').css('visibility', 'hidden')
table doen't change its size $('.subtable').css('visibility', 'hidden') + 移动类到父类
table changes its size but has no empty cells $('.subtable').hide() + 移动类到父类

【讨论】：