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

我有一个文本输入框

和这样的多个HTML表 ：

 
 
 
 
Table1 title
 
 
 
Name
 
Country
 
 
 
 
 
Andrew
 
USA
 
 
 
John
 
Canada
 
 
  

我想根据输入框中的用户类型过滤数据。

现在我的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

试试这个演示

  $("#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('
Sorry No results found!!!
'); } }); // 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; } });