jquery：如何根据文本输入隐藏表格

Question

我有一个文本输入框

<input type="text" id="search" />

和多个HTML表格像这样：

<table id="table1">
<thead>
        <tr>
                <th>Table1 title</th>
        </tr>
        <tr>
                <th>Name</th>
                <th>Country</th>
        </tr>
</thead>
<tbody>
        <tr>
                <td>Andrew</td>
                <td>USA</td>
        </tr>
        <tr>
                <td>John</td>
                <td>Canada</td>
        </tr>
</tbody>
</table>

我想根据用户在输入框中输入的内容过滤数据。

现在我的 JS 代码是：

$(document).ready(function(){

$("#search").keyup(function(){
        // When value of the input is not blank
        if( $(this).val() != "")
        {
                // Show only matching TR, hide rest of them
                $("#table1 > tbody > tr").hide();
                $("#table1 td:contains-ci('" + $(this).val() + "')").parent("tr").show();
         } else {
                // When there is no input or clean again, show everything back
                $("#table1 tbody > tr").show();
                }
        });
});

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

一切正常。

但是，如果输入的文本不在表格中，我现在想隐藏整个表格，包括标题 TR。

我怎样才能得到它？

Answer 1

试试这个Demo

     $("#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);
            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;
    }
});