Search in all columns of a table

Question

Search in all columns of a table

Navigation

#1 by (1 votes)

0

I'm using the below function to do a "live" search on a table. The problem is that I want it to bring data into all the 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>

javascript jquery table

asked by anonymous 23.01.2017 / 15:00

1 answer

Search for string in SQL / PHP database Static method does not have access to class variable

score 1 · Answer 1

Instead of doing the search only the first td you can do in tr with all your content.

Replaces

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

by

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

You can simplify the code ( jsFiddle ) but the ideal would be to cache some elements. The final solution might look 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 is static, this line can parse out of the inner function, and be cached as table , on the line below table = document.getElementById("dados");