jQuery搜索表行，隐藏和可见 [英] jQuery search through table rows, hidden and visible

问题描述

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

I've got a table where i display message history. By default the table displays only the last message between two people. But all of the messages are in the HTML code, just that they are set with display:none;

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

Im trying to make the search go through both visible and hidden tr rows.

我现在有什么：

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 仍然存在。

1. For some reason the first tr is always visible even through it does not match the search. Try to search for buggy css. You'll see that the first tr is still there.

当我搜索某些内容时，然后清除搜索字段。第二个 tr 默认设置为 display：none; 可见。它必须以某种方式返回显示：无州

When i search for something, and then clear the search field. The second tr which is by default set to display:none; is visible. It has to somehow go back to a display:none state

jsfiddle：

http://jsfiddle.net/2T5yJ /

推荐答案

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

For first row index is zero. So its not reaching

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

删除

 if (!index) return;

搜索过滤器工作正常

更新你可以检查 value =并写入逻辑以将行显示回原始

Update you can check if value="" and write logic to get back display of rows to original

请查看更新的小提琴

FIDDLE

这篇关于jQuery搜索表行，隐藏和可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！