2017-02-09 25 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

Добро пожаловать. Да, я пытаюсь сначала скрывать таблицу за классом, и я забыл удалить этот код. –