Search all columns of a table

Question

I’m using the function below to do a "live" search on a table. The problem is that I want it to bring data to all columns, and it’s currently only bringing the first.

    function pesquisaTabela() {
      // Declare variables
      var input, filter, table, tr, td, i;
      input = document.getElementById("search");
      filter = input.value.toUpperCase();
      table = document.getElementById("dados");
      tr = table.getElementsByTagName("tr");
      console.log("ssss"+tr.length);
      // Loop through all table rows, and hide those who don't match the search query
      for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[0];
        if (td) {
          if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
            tr[i].style.display = "";
            console.log(tr[i]);
          } else {
            tr[i].style.display = "none";
          }
        }
      }
    }

Table

        <table class"table-highlight" id="dados">
            <thead>
              <tr>
                  <th data-field="id">Item</th>
                  <th data-field="numero">Número de Rastreamento</th>
                  <th data-field="data">Enviado em</th>
                  <th data-field="status">Status</th>

              </tr>
            </thead>

            <tbody>
              <tr>
                <td>Pacote 01</td>
                <td><a class="waves-effect waves-light btn" href="#modal1">BR021WMR000016437462</a></td>
                <td>20/01/2017</td>
                <td><span>Em trânsito</span></td>

              </tr>
              <tr>
                <td>Pacote 02</td>
                <td><a class="waves-effect waves-light btn" href="#modal1">SP021WMR000016437462</a></td>
                <td>15/01/2017</td>
                <td><span>Entregue</span></td>

              </tr>
              <tr>
                <td>Pacote 03</td>
                <td><a class="waves-effect waves-light btn" href="#modal1">CR021WMR000016437462</a></td>
                <td>20/01/2017</td>
                <td><span>Cancelado</span></td>

              </tr>
            </tbody>
          </table>

Answer 1

I’m going to search only the first one td you can do in the tr with all its contents.

Replaces

td.innerHTML.toUpperCase().indexOf(filter) > -1

for

tr.textContent.toUpperCase().indexOf(filter) > -1

You can simplify the code (jsFiddle) but the ideal would be to cache some elements. The final solution could be like this:

(jsFiddle)

document.getElementById('search').addEventListener('keyup', pesquisaTabela());

function pesquisaTabela() {
  var filter, table, tr, td, i;
  table = document.getElementById("dados");
  return function() {
    tr = table.querySelectorAll("tbody tr");
    filter = this.value.toUpperCase();
    for (i = 0; i < tr.length; i++) {
      var match = tr[i].innerHTML.toUpperCase().indexOf(filter) > -1;
      tr[i].style.display = match ? "block" : "none";
    }
  }
}

tr {
  display: block;
}

<div>
  <input type="text" id="search">
</div>
<table class="table-highlight" id="dados">
  <thead>
    <tr>
      <th data-field="id">Item</th>
      <th data-field="numero">Número de Rastreamento</th>
      <th data-field="data">Enviado em</th>
      <th data-field="status">Status</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Pacote 01</td>
      <td><a class="waves-effect waves-light btn" href="#modal1">BR021WMR000016437462</a>
      </td>
      <td>20/01/2017</td>
      <td><span>Em trânsito</span>
      </td>

    </tr>
    <tr>
      <td>Pacote 02</td>
      <td><a class="waves-effect waves-light btn" href="#modal1">SP021WMR000016437462</a>
      </td>
      <td>15/01/2017</td>
      <td><span>Entregue</span>
      </td>

    </tr>
    <tr>
      <td>Pacote 03</td>
      <td><a class="waves-effect waves-light btn" href="#modal1">CR021WMR000016437462</a>
      </td>
      <td>20/01/2017</td>
      <td><span>Cancelado</span>
      </td>

    </tr>
  </tbody>
</table>

Note: if the tr are static this line can hang out of the inner function, and be cached as table, on the line below table = document.getElementById("dados");

Answer 2

<div>
  <p style="text-align: right">
    <b>Digite o Nome do Produto:</b>
    <input type="text" id="search" placeholder="Buscar">
  </p>
</div>

$("#search").keyup(function() {
  var value = this.value.toLowerCase().trim();

  $("table tr").each(function(index) {
    if (!index) return;
    $(this).find("td").each(function() {
      var id = $(this).text().toLowerCase().trim();
      var not_found = (id.indexOf(value) == -1);
      $(this).closest('tr').toggle(!not_found);
      return not_found;
    });
  });
});