2017-02-09 9 views
0

私はテーブルと検索テキストボックスを持っています。私はこのスクリプトを使用して検索ボックスに何かを入力するとき、私は、テーブルをフィルタリングしています:検索結果の表を表示しない0

$(document).ready(function(){ 
    // Write on keyup event of keyword input element 
    $("#buscador").keyup(function(){ 

     var $rows1 = $('#tablaproyectos1 tbody>tr'); 
     $('#buscador').keyup(function() { 
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 

      $rows1.show().filter(function() { 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
       return !~text.indexOf(val); 
      }).hide(); 
     }); 
    }); 
}); 

私の質問は:検索の結果がないときはどうすればテーブルを非表示にできますか?

このような何かが動作するはず

答えて

0

$(document).ready(function(){ 
 
    // Write on keyup event of keyword input element 
 
    $("#buscador").keyup(function(){ 
 

 
     var $rows1 = $('#tablaproyectos1 tbody>tr'); 
 
     $('#buscador').keyup(function() { 
 
      $('#tablaproyectos1').show(); 
 
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase(); 
 

 
      $rows1.show().filter(function() { 
 
       var text = $(this).text().replace(/\s+/g, ' ').toLowerCase(); 
 
       return !~text.indexOf(val); 
 
      }).hide().addClass('hide'); 
 
      if ($('#tablaproyectos1 tbody>tr:visible').length == 0) { 
 
       $('#tablaproyectos1').hide(); 
 
      } 
 
     }); 
 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="buscador" /> 
 
<table id="tablaproyectos1" style="border: 2px solid blue;"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Esto es una prueba de celda</td> 
 
     </tr> 
 
    <tr> 
 
     <td>Texto de relleno</td> 
 
     </tr> 
 
    <tr> 
 
     <td>Otra celda de prueba</td> 
 
     </tr> 
 
    <tr> 
 
     <td>Suficiente para comprobar el buscador</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

それが表示される行をカウント動作します。これの合計の長さが0の場合は、親表を非表示にします。テーブルは常に最初に表示されます。

+0

あなたの答えに感謝します。私は少し問題があります。あなたのコードスニペットでは完璧に動作しますが、私のページにコードを置くとテーブルが隠されますが、テキストフィールドのテキストを削除してもテーブルは表示されません。私に何ができる? –

+0

を修正しました。 .addClass( 'hide')を削除しました。 –

+0

あなたは大歓迎です。はい、私は最初にクラスでテーブルを隠すようにしていますが、私はこのコードを削除することを忘れてしまいます。 –

関連する問題