当搜索结果为 0 时隐藏 table

Question

我有一个 table 和一个搜索文本框。当我使用此脚本在搜索框中键入内容时，我正在过滤 table：

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

我的问题是：没有搜索结果时如何隐藏table？

Answer 1

像这样的东西应该可以工作：

$(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，则隐藏父级 table。 Table 总是显示在开头。

当搜索结果为 0 时隐藏 table

Hide table when search results 0

html

javascript

search

hide