Question

我有PHP生成的表，通常一次超过10个。我想使用一个搜索字段来查找与所有表中的输入匹配的行，并仅显示那些行，但如果表中没有这样的行，那么我希望隐藏该表。

我在https://stackoverflow.com/a/16127730/3435158发现了一个非常好的隐藏表，它可以隐藏不匹配行的表格 - 但是他的代码整个表格与搜索输入匹配保持可见，而我只希望匹配的行是可见的，而不是整个表。

我想要做的是如果我输入＆＃39; andrew＆＃39;在搜索字段中，我想得到（希望我现在更清楚）：

+---------+
| table 1 |
+---------+
| Andrew  |
+---------+

+---------+
| table 4 |
+---------+
| Andrew  |
+---------+

Answer 1

我设法编辑PSL code并使其适用于我需要的内容：http://jsfiddle.net/jrfUM/115/

<input type="text" id="search" />
<table class="tblDetails">
    <thead>
        <tr><th>Table 1</th></tr>
    </thead>
    <tbody>
        <tr><td>Andrew</td></tr>
        <tr><td>John</td></tr>
    </tbody>
</table>
<table class="tblDetails">
    <thead>
        <tr><th>Table 2</th></tr>
    </thead>
    <tbody>
        <tr><td>Jack</td></tr>
        <tr><td>Marc</td></tr>
    </tbody>
 ....

$("#search").keyup(function () {
    var txtVal = $(this).val();
    if (txtVal != "") {
        $(".tblDetails").show();
        $(".message").remove();
        $.each($('.tblDetails'), function (i, o) {
            var match = $("td:contains-ci('" + txtVal + "')", this);
            match.parent().siblings().hide();                       //  <<=== [LINE ADD]
            if (match.length > 0) $(match).parent("tr").show();
            else $(this).hide();
        });
    } else {
        // When there is no input or clean again, show everything back
        $("tbody > tr", this).show();
    }
    if($('.tblDetails:visible').length == 0)
    {
        $('#search').after('<p class="message">Sorry No results found!!!</p>');
    }
});

// jQuery expression for case-insensitive filter
$.extend($.expr[":"], {
    "contains-ci": function (elem, i, match, array) {
        return (elem.textContent || elem.innerText || $(elem).text() || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
    }
});

使用一个搜索字段

1 个答案: