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

一切正常確定。

但是現在我想隱藏包含thead 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; 
    } 
});