Javascript 使用一个搜索字段在多个表中搜索/筛选行

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

我在这里找到了一个非常接近的答案，它在隐藏没有匹配行的表方面做得非常好——然而，通过他的代码，匹配搜索输入的整个表保持可见，我只希望匹配的行可见，而不是整个表

---

编辑：

我想做的是，如果我在搜索字段中键入“andrew”，我想得到（希望我现在更清楚）：

我设法编辑并使其符合我的需要：

表1
安得烈
约翰
表2
杰克
马克
....

---

$（“#搜索”）.keyup（函数（）{
var txtVal=$（this.val（）；
如果（txtVal！=“”）{
$（“.tblDetails”）.show（）；
$（“.message”）.remove（）；
$.each（$（'.tblDetails'），函数（i，o）{
var match=$（“td:包含ci（“+txtVal+”）”，this）；
match.parent（）.sides（）.hide（）；/=0；
}
});

我成功地编辑了它，使它能够满足我的需要：

表1
安得烈
约翰
表2
杰克
马克
....

---

$（“#搜索”）.keyup（函数（）{
var txtVal=$（this.val（）；
如果（txtVal！=“”）{
$（“.tblDetails”）.show（）；
$（“.message”）.remove（）；
$.each（$（'.tblDetails'），函数（i，o）{
var match=$（“td:包含ci（“+txtVal+”）”，this）；
match.parent（）.sides（）.hide（）；/=0；
}
});

看看datatables.js，它具有非常有用的排序和过滤功能。如果你不想麻烦地在表中创建一个jsfiddle并开始，我将添加一个投票来删除-1，并在配置方面给你帮助。嗯，我和我所链接的线程中的家伙有着非常准确的问题，但是好的，我会做一些小动作。我希望你有一个好的答案We’我们正在寻找类似的东西。它在表、列表上工作。@sahil它确实工作，但它留给我的是空表，如果没有匹配的行，我只能看到标题，如果是空的，它不会完全隐藏表。在我这里的小提琴示例中，我会得到表1-Andrew//表2//表3//表4-Andrew。看看datatables.js，它有非常有用的排序和过滤功能。如果你在表格和开始时遇到麻烦，我将添加一个投票删除-1，并在配置上给你帮助。嗯，我有一个非常确切的问题，作为我在讨论中链接的线程中的家伙，但好吧，我会做一些小动作。我希望你正在寻找类似的东西。它在表格上工作es，lists.@sahil它确实有效，但它给我留下了一个空表，当没有匹配的行时，我只能看到标题，如果是空的，它不会完全隐藏表。在我这里的小提琴示例中，我得到表1-Andrew//table 2//table 3//table 4-Andrew。更好的是-可能将

.keyup（function（）

更改为

.change（function（））

并将

$（“.message”）.remove（）；

移动到if语句之前，以便始终删除消息。这样，删除错误的搜索不会保留错误消息（delete不会触发keyup）。更好的方法是-可能将

.keyup（function（）

更改为

。更改（function（）

并移动

$(“.message”）.remove（）；

到if语句之前，以便始终删除消息。这样，删除错误搜索不会保留错误消息（delete不会触发keyup）。

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

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

<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;
    }
});