0

Boa noite, eu estou tentando fazer uma barra de pesquisa que filtre por celulas entre varias tabelas, e gostaria que essa pesquisa ocultasse o <thead> das tabelas que não possuam resultados correspondentes a pesquisa, ou seja, quando o usuário pesquisar Perna, a tabela onde constam Locais e Paises bem como a tabela onde constam Carros e Fabricantes de Motocicletas, por não ter em nenhuma <tr> o texto Perna, deve ter o <thead> ocultado, ou até mesmo toda a <table> ocultada.

//pesquisa
    $(document).ready(function () {
        $("#searchInput").on("keyup", function () {
            var value = $(this).val().toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,
                "");
            $("tbody tr").filter(function () {
                $(this).toggle($(this).text().toLowerCase().normalize('NFD').replace(
                    /[\u0300-\u036f]/g, "").indexOf(value) > -1)

            });

            $("thead").each(function () {
                let trVisiveis = $(this).parent().find('tbody tr').not(':hidden');
                trVisiveis.length > 0 ? $(this).show() : $(this).hide();
            })
        });
    });
// oculta todos menos o DIV selecionado no selector
    $('#select_box').change(function () {
        var select = $(this).find(':selected').text();
        $("div").hide();
        $('#' + select).show();

    }).change();
table {
         font-family: arial, sans-serif;
         border-collapse: collapse;
         width: 100%;
         }
         td, th {
         border: 1px solid #dddddd;
         text-align: left;
         padding: 8px;
         }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="searchInput" placeholder="Digite para filtrar...">
<br />
<br/>
<select id="select_box">
<option>tabelas-1</option>
<option>tabelas-2</option>
</select>
<br />
<br />
<div id="tabelas-1">
<table>
<thead>
  <tr>
    <th>Corpo</th>
    <th>Cores</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Cabeca</td>
    <td>Azul</td>
  </tr>
  <tr>
    <td>Braco</td>
    <td>Vermelho</td>
  </tr>
  <tr>
    <td>Perna</td>
    <td>Amarelo</td>
  </tr>
</tbody>
  </table>
  <br/>
  <table>
<thead>
  <tr>
    <th>Carros</th>
    <th>Fabricantes de Motocicletas</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Porshe</td>
    <td>Harley</td>
  </tr>
  <tr>
    <td>Mustang</td>
    <td>Yamaha</td>
  </tr>
  <tr>
    <td>Camaro</td>
    <td>Honda</td>
  </tr>
</tbody>
  </table>
  <br/>
  <table>
<thead>
  <tr>
    <th>Locais</th>
    <th>Paises</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>Aqui</td>
    <td>Quenia</td>
  </tr>
  <tr>
    <td>Ali</td>
    <td>Alemanha</td>
  </tr>
  <tr>
    <td>Acola</td>
    <td>India</td>
  </tr>
</tbody>
  </table>
</div>
<div id="tabelas-2">
<table>
    <thead>
        <tr>
          <th>Display</th>
          <th>Datas comemorativas</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Amoled</td>
          <td>Natal</td>
        </tr>
        <tr>
          <td>LCD</td>
          <td>Páscoa</td>
        </tr>
        <tr>
          <td>OLED</td>
          <td>Ação de graças</td>
        </tr>
      </tbody>
</table>
<br/>
<table>
    <thead>
        <tr>
          <th>Linhas de celulares</th>
          <th>Sistemas Operacionais</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Redmi</td>
          <td>Ubuntu</td>
        </tr>
        <tr>
          <td>Galaxy S</td>
          <td>Mint</td>
        </tr>
        <tr>
          <td>iPhone</td>
          <td>Fedora</td>
        </tr>
      </tbody>
</table>
</div>

Alguém teria alguma ideia de como alcançar isso? Obrigado.

PS: Algumas tentativas, sem sucesso, a partir do post

Sugestão do SeeTheC

function hide() {

$('tbody').each(function(){  
  if($(this).not("tr:hidden").length=1)
    {      
      $(this).parent().find("thead").hide();
    }
});
  
  
}

Sugestão do Musa

$('tbody').each(function(){
    if ($(this).has("> tr:visible").length === 0){
        $(this).closest('table').hide();
    }
});

Sugestão do acontell

$("#filter").change(function () {// Select changes and filters rows of the different tables.
    var class_to_filter = "." + $(this).val();// I'm accessing rows by class in order to close them, you may access them using some other method.

    $.each($(class_to_filter), function (i, item) {// For each one of them, close and check if you have to close thead as well.
        var $tr = $(item).closest('tr'),
            $tbody = $tr.closest('tbody'),
            $thead = $tbody.siblings('thead'),
            numOfVisibleRows;

        $tr.hide();// Hide row.
        numOfVisibleRows = $('tr:visible', $tbody).length;// Number of sibling rows visible.

        if (!numOfVisibleRows) {// if 0, hide thead.
            $thead.hide();
        }
    });
});
0

3 Respostas 3

0

Você pode alterar seu script assim:

O método parents() é utilizado para selecionar o elemento pai table para ocultar, e o elemento tbody para verificar se tem o conteúdo pesquisado.

$(document).ready(function() {
      $("#searchInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("tbody tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
          // Utilizando parents e selecionando tbody para verificar se tem o texto do input
           $(this).parents("table").toggle($(this).parents("tbody").text().toLowerCase().indexOf(value) > -1)

        });

      });

    });
0

Faça o seguinte:

Após rodar seu script para esconder colunas que não entram no seu filtro, rode outro script que irá computar se há alguma coluna visível para aquela thead.

Como fazer isso?

Busque por todos os elementos que são thead em sua página:

$("thead")

Em seguida, rode um script para cada um deles através da função each:

$("thead").each(function (){});

Dentro da função que irá rodar para cada thead, para alcançar suas linhas do tbody, você precisa pegar o tbody do contexto e usar a função parent:

$(this).parent()

Dessa forma, acabamos obtendo a table relacionada à aquela thead. Agora vamos procurar pelas linhas do tbody, da seguinte maneira:

$(this).parent().find('tbody tr')

Faça um filtro que irá excluir as linhas que estão escondidas através da função not:

$(this).parent().find('tbody tr').not(':hidden')

Depois disso tudo, é só ver quantos elementos essa consulta retornou... e aplicar sua lógica para mostrar ou não a thead.

Um exemplo dessa implementação, ficaria assim:

$("thead").each(function (){ 
    let trVisiveis = $(this).parent().find('tbody tr').not(':hidden');
    trVisiveis.length > 0 ? $(this).show() : $(this).hide(); 
})

E o seu script ficaria assim:

$(document).ready(function() {
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)

    });
    
    $("thead").each(function (){ 
        let trVisiveis = $(this).parent().find('tbody tr').not(':hidden');
        trVisiveis.length > 0 ? $(this).show() : $(this).hide(); 
    })
  });
});
3
  • Boa noite, @Bruno Warmling, eu atualizei o código da postagem para incluir um <selector>, e durante a pesquisa, quando eu digito "ca", por exemplo, ele filtra as linhas contendo "Cabeca" e "Camaro", mas quando eu alterno o <selector>, para tabelas-2, ele acha a linha contendo "Ação de graças", mas não mostra o <thead>, e se dentro de 'tabelas-2', eu limpo a barra de pesquisa, e volto para 'tabelas-1' ele não mostra nenhum <thead>. Você teria alguma ideia de como contornar essa situação?
    – Lucas
    Commented 4/11/2020 às 3:38
  • cara, ficar alterando sua pergunta não ajuda em nada... minha boa vontade de responder se acaba por aqui. Commented 4/11/2020 às 11:31
  • Sinto muito, e obrigado.
    – Lucas
    Commented 4/11/2020 às 22:36
-3

Parabéns, muito bom!! usei no meu código assim:

abrirQGRobo = function(registro) { $("#qgroboModal").modal(); $(".class-robo").each(function () { $(this).hide(); }) $(".tr_" + registro).each(function () { $(this).show(); }) }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .