0

Estou montando uma tabela do Bootstrap e eu gostaria de colocar alguns filtros de pesquisa nessa tabela. Eu procurei e achei um modo interessante de pesquisar através de um input. Seria dessa forma:

$('input#txt_consulta').quicksearch('table#tabela tbody tr');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="form-group input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
  <input name="consulta" id="txt_consulta" placeholder="Consultar" type="text" class="form-control">
 </div>

<table id="tabela" class="table table-hover">
  <thead>
      <tr>
          <th>Email</th>
          <th>Id</th>
          <th>Telefone</th>
          <th>Url</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <th>[email protected]</th>
          <td>66672</td>
          <td>941-964-8535</td>
          <td>http://gmail.com</td>
      </tr>
  
      <tr>
          <th>[email protected]</th>
          <td>35889</td>
          <td>941-964-9543</td>
          <td>http://dotnet.ca</td>
      </tr>
  </tbody>
 </table>

Só que no meu projeto, eu não estou usando o jQuery, alguém aí poderia me mostrar como esse comando jQuery ficaria no TypeScript? Ou então uma outra alternativa usando o JavaScript puro?

2
  • Lima, as tags html e html5 são desnecessárias. Por mais que a sua pergunta possui um trecho nessa linguagem, o objetivo dela é somente a implementação de uma funcionalidade de uma biblioteca do jQuery em TypeScript. Não está relacionada com HTML.
    – Woss
    25/06/2019 às 17:45
  • Tudo bem @AndersonCarlosWoss, já as removi
    – user153240
    25/06/2019 às 17:50

1 Resposta 1

2

Com javascript seria isso

function myFunction() {
  var input, filter, table, tr, td, cell, i, j;
  input = document.getElementById("txt_consulta");
  filter = input.value.toUpperCase();
  table = document.getElementById("tabela");
  tr = table.getElementsByTagName("tr");

  for (i = 1; i < tr.length; i++) {
    tr[i].style.display = "none";
    td = tr[i].getElementsByTagName("td");

  for (var j = 0; j < td.length; j++) {
       cell = tr[i].getElementsByTagName("td")[j];
       if (cell) {
          if (cell.innerHTML.toUpperCase().indexOf(filter) > -1) {
              tr[i].style.display = "";
              break;
          } 
       }
    }
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="form-group input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
  <input name="consulta" id="txt_consulta" placeholder="Consultar" type="text" class="form-control" onkeyup="myFunction()">
 </div>

<table id="tabela" class="table table-hover">
  <thead>
      <tr>
          <th>Email</th>
          <th>Id</th>
          <th>Telefone</th>
          <th>Url</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <th>[email protected]</th>
          <td>66672</td>
          <td>941-964-8535</td>
          <td>http://gmail.com</td>
      </tr>
  
      <tr>
          <th>[email protected]</th>
          <td>35889</td>
          <td>941-964-9543</td>
          <td>http://dotnet.ca</td>
      </tr>
  </tbody>
 </table>

5
  • Ótimo, funcionou perfeitamente.
    – user153240
    25/06/2019 às 17:52
  • Apenas 1 problema Douglas. Está pesquisando também pelo thead. A busca deveria ser feita apenas nos tbody's. eu tentei colocar depois do table e antes do th, o seguinte código: tbody = table.getElementsByTagName('tbody'); e declarei a variável também, e mudei o valor do th para tbody.getElementsByTagName('tr');, mas nao funcionou, pode corrigir isto ?
    – user153240
    25/06/2019 às 18:17
  • Por exemplo, no seu código, quando eu pesquiso apenas "fa" ele remove o thead, pois não tem nenhum "fa" no thead. Eu consegui fazer colocando um id diretamente no tbody e buscando por ele, ao inves de buscar no id tabela
    – user153240
    25/06/2019 às 18:31
  • Ajustei o código 26/06/2019 às 12:36
  • Ficou muito bom. Agora só mais uma coisa, se puder. Como eu consigo fazer um if() que verifica se todas tr estão com display: none?
    – user153240
    26/06/2019 às 15:07

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