私はそれらを検索し、私は入力を削除するときに非表示の行を表示するテーブルをしたいですか？

Question

.hiddenクラスは表示されませんが、検索すると表示されますが、入力を削除すると消えないという問題があります...

これを修正すると、.hiddenクラスが私は入力を削除し始めますか？

これは私のソースコードです： HTML：

<input id="filter" type="text" class="form-control" placeholder="Datumu, Naslovu, Propovedniku"> 

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th>Date</th> 
      <th>Title</th> 
      <th>Something</th> 
      <th>Options</th> 
     </tr> 
    </thead> 
    <tbody class="searchable"> 
     <tr> 
      <td>12/06/16</td> 
      <td>Example</td> 
      <td>Janko Tomas</td> 
      <td>Video</td> 
     </tr> 
     <tr> 
      <td>GBP</td> 
      <td>Pound</td> 
      <td></td> 
      <td>Active</td> 
     </tr> 
     <tr> 
      <td>GEL</td> 
      <td>Georgian Lari</td> 
      <td><span class="glyphicon glyphicon-ok"></span> 
      </td> 
      <td>Active</td> 
     </tr> 
     <tr> 
      <td>USD</td> 
      <td>US Dollar</td> 
      <td></td> 
      <td>Active</td> 
     </tr> 
     <tr class="hidden"> 
      <td>USD</td> 
      <td>US Dollar</td> 
      <td></td> 
      <td>Active</td> 
     </tr> 
    </tbody> 
</table> 

CSS：

#section{ 
    width: 80%; 
    margin: auto; 
} 

.sub-section{ 
    width: 100%; 
    margin: auto; 
    position: relative; 
} 

.table{ 
    width: 100%; 
    margin: auto; 
    background-color: white; 
} 

thead{ 
    background-color: #333; 
    color: white; 
    margin: 0; 
} 

thead tr th{ 

    font-weight: normal; 
    padding-top: 5px; 
    padding-bottom: 5px; 
} 
thead tr{ 
    margin: 0; 
    padding: 0; 
} 

.hidden{ 
    display: none; 
} 

そして最後のjQuery：

$(document).ready(function() { 

    (function ($) { 

     $('#filter').keyup(function() { 

      var rex = new RegExp($(this).val(), 'i'); 
      $('.searchable tr').hide(); 
      $('.searchable tr').filter(function() { 
       return rex.test($(this).text()); 
      }).show(); 
      $('.hidden').filter(function() { 
       return rex.test($(this).text()); 
      }).show(); 
     }) 
    }(jQuery)); 
}); 

Answer 1

チェックこれは、私はあなたにこのヘルプを考える

$(document).ready(function() { 
 

 
    (function ($) { 
 

 
     $('#filter').keyup(function() { 
 

 
      var rex = new RegExp($(this).val(), 'i'); 
 
      $('.searchable tr').hide(); 
 
      $('.searchable tr').filter(function() { 
 
       return rex.test($(this).text()); 
 
      }).show(); 
 
\t \t \t if($(this).val()!=""){ 
 
      $('.hidden').filter(function() { 
 
       return rex.test($(this).text()); 
 
      }).show(); 
 
\t \t \t } 
 
\t \t \t else{ 
 
\t \t \t \t $('.hidden').hide(); 
 
\t \t \t \t } 
 

 

 

 
     }) 
 

 

 

 

 

 
    }(jQuery)); 
 

 
});

<style> 
 
    #section{ 
 
    width: 80%; 
 
    margin: auto; 
 
} 
 

 
.sub-section{ 
 
    width: 100%; 
 
    margin: auto; 
 
    position: relative; 
 
} 
 

 
.table{ 
 
    width: 100%; 
 
    margin: auto; 
 
    background-color: white; 
 
} 
 

 
thead{ 
 
    background-color: #333; 
 
    color: white; 
 
    margin: 0; 
 
} 
 

 
thead tr th{ 
 

 
    font-weight: normal; 
 
    padding-top: 5px; 
 
    padding-bottom: 5px; 
 
} 
 
thead tr{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.hidden{ 
 
    display: none; 
 
} 
 
    </style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="filter" type="text" class="form-control" placeholder="Datumu, Naslovu, Propovedniku"> 
 

 
<table class="table table-striped"> 
 
    <thead> 
 
     <tr> 
 
      <th>Date</th> 
 
      <th>Title</th> 
 
      <th>Something</th> 
 
      <th>Options</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody class="searchable"> 
 
     <tr> 
 
      <td>12/06/16</td> 
 
      <td>Example</td> 
 
      <td>Janko Tomas</td> 
 
      <td>Video</td> 
 
     </tr> 
 
     <tr> 
 
      <td>GBP</td> 
 
      <td>Pound</td> 
 
      <td></td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr> 
 
      <td>GEL</td> 
 
      <td>Georgian Lari</td> 
 
      <td><span class="glyphicon glyphicon-ok"></span> 
 
      </td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr> 
 
      <td>USD</td> 
 
      <td>US Dollar</td> 
 
      <td></td> 
 
      <td>Active</td> 
 
     </tr> 
 
     <tr class="hidden"> 
 
      <td>USD</td> 
 
      <td>US Dollar</td> 
 
      <td></td> 
 
      <td>Active</td> 
 
     </tr> 
 
    </tbody> 
 
</table>