javascript - jQuery 搜索表行(隐藏和可见)

Question

我有一个显示消息历史记录的表格。默认情况下，该表仅显示两个人之间的最后一条消息。但所有消息都在 HTML 代码中，只是用 display:none;

设置

我试图让搜索同时遍历可见和隐藏的 tr 行。

我目前拥有的:

HTML:

            <table cellpadding="0" cellspacing="0" width="100%" class="tDefault mytasks" id="history">
                    <tr>
                        <td>Finish design</td>
                        <td align="center"><strong class="grey">0%</strong></td>
                    </tr>
                    <tr>
                        <td>Aquincum HTML code</td>
                        <td align="center"><strong class="green">89%</strong></td>
                    </tr>
                    <tr style="display:none;">
                        <td>Aquincum cpp code</td>
                        <td align="center"><strong class="green">99%</strong></td>
                    </tr>                            

                    <tr>
                        <td>Fix buggy css styles</td>
                        <td align="center"><strong class="red">16%</strong></td>
                    </tr>

            </table>

jQuery:

$("#search").keyup(function() {
    var value = this.value.toLowerCase().trim();

    $("#history tr").each(function (index) {
        if (!index) return;
        $(this).find("td").each(function () {
            var id = $(this).text().toLowerCase().trim();
            var not_found = (id.indexOf(value) == -1);
            $(this).closest('tr').toggle(!not_found);
            return not_found;
        });
    });
});

我有两个问题:

1. 由于某种原因，第一个 tr 始终可见，即使它与搜索不匹配。尝试搜索buggy css。您会看到第一个 tr 仍然存在。

2. 当我搜索某些内容，然后清除搜索字段时。默认情况下设置为 display:none; 的第二个 tr 是可见的。它必须以某种方式返回到 display:none 状态

jsfiddle:

http://jsfiddle.net/2T5yJ/

Answer 1

第一行索引为零。所以它没有达到

        $(this).find("td").each(function () {

删除

 if (!index) return;

搜索过滤器将正常工作

更新您可以检查value=""并编写逻辑以将行显示恢复为原始

请检查更新的 fiddle

FIDDLE