使用JS过滤多个html表

Question

I'm working on a page with large multiple tables in Html. To filter them I found and adapted this script that filter for every cell of the table:

<script>
function searchtable() {
  var input, filter, table, tr, td, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  th = table.getElementsByTagName("th");

  for (i = 1; i < tr.length; i++) {
    if (!tr[i].classList.contains('header')) {
      td = tr[i].getElementsByTagName("td"),
      match = false;
      for (j = 0; j < td.length; j++) {
        if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
          match = true;
          break;
        }
      }
      if (!match) {
        tr[i].style.display = "none";
      } else {
        tr[i].style.display = "";
      }
    }
  }
}
</script>

The problem here is that the code work only in the first table of the page and not in the others. I'd prefer to NOT repeat the script personalizing for every and each table. Do you have any suggestion on how to personalize the script to look up in multiple tables?

Edit: Do you know any different script that do the same thing?

Answer 1

html:

    <table id="table2">
      <thead></thead>
      <tbody>
        <tr></tr> <tr></tr>
      </tbody>
  </table>   

js:

var table1 = document.getElementById("table1");
     var table2 = document.getElementById("table2");

 searchtable(table1);
 searchtable(table2);

    function searchtable(table) {
      var input, filter, table, tr, td, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();

      tr = table.getElementsByTagName("tr");
      th = table.getElementsByTagName("th");

      for (i = 1; i < tr.length; i++) {
        if (!tr[i].classList.contains('header')) {
          td = tr[i].getElementsByTagName("td"),
          match = false;
          for (j = 0; j < td.length; j++) {
            if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
              match = true;
              break;
            }
          }
          if (!match) {
            tr[i].style.display = "none";
          } else {
            tr[i].style.display = "";
          }
        }
      }
    }

Answer 2

I've tried to explain most parts I've changed. In the end the code itsself is a bit shorter, but a tiny bit more complicated. If I made assumptions that aren't correct, let me know. (For example, I'm assuming the 'header' class is only atatched to <tr> elements inside the <thead> who contains <th> elements)

 var searchTable = function searchTable(table, input) { // Since we bound the input, we can use input.value to get the current words typed into the input. var filter = input.value, // A table has both a thead and a tbody. // By only selecting the tr nodes from the body, we can remove the entire 'check if this is a header tr logic of `tr.classList.contains('header')` // Keep in mind that querySelector returns a nodeList, so if we want to use array methods, we need to covnert it into a real array. // The original code uses getElementsByTagName, which return a LIVE nodeList, watch out for this difference. rows = Array.prototype.slice.call(table.querySelectorAll('tbody tr')); rows.forEach(function(row) { // Since we don't care in which cell the fitler is contained, we can just check the innerHTML of the entire row. // This will only fail if the filter typed into the inputs is either 'tr' or 'td' var hide = (row.innerHTML.indexOf(filter) === -1); // The alternative is actually checking each cell, but this makes the script take longer: // var hide = !Array.prototype.slice.call( row.querySelectorAll('td') ).some(function( cell ) { // return (cell.innerHTML.indexOf( filter ) !== -1); // }); if (hide) row.classList.add('gone'); else if (row.classList.contains('gone')) row.classList.remove('gone'); }); }, // helper function that we can use to bind the searchTable function to any table and input we want // We add an onchange event listener, passing it a bound version of searchTable. bindSearch = function bindSearch(tableID, inputID) { var input = document.querySelector(inputID), table = document.querySelector(tableID); if (table && input) input.addEventListener('change', searchTable.bind(null, table, input)); else alert('Table or input does not exist.'); }; // We can add as many individual inputs / tables as we want by just calling bindSearch with the right ids. bindSearch('#table1', '#input1'); bindSearch('#table2', '#input2'); 

 .gone { display: none; } 

 <input type="text" id="input1"> <table id="table1"> <thead> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1-1: foo</td> <td>Cell 1-2: bar</td> <td>Cell 1-3: baz</td> <td>Cell 1-4: foo</td> </tr> <tr> <td>Cell 2-1: apples</td> <td>Cell 2-2: cherries</td> <td>Cell 2-3: bananas</td> <td>Cell 2-4: foo</td> </tr> <tr> <td>Cell 3-1: cars</td> <td>Cell 3-2: bar</td> <td>Cell 3-3: planes</td> <td>Cell 3-4: apples</td> </tr> <tr> <td>Cell 4-1: baz</td> <td>Cell 4-2: 2017</td> <td>Cell 4-3: 2010</td> <td>Cell 4-4: 2001</td> </tr> <tr> <td>Cell 5-1: cars</td> <td>Cell 5-2: 2017</td> <td>Cell 5-3: foo</td> <td>Cell 5-4: undefined</td> </tr> </tbody> </table> <br> <br> <input type="text" id="input2"> <table id="table2"> <thead> <tr> <th>header 1</th> <th>header 2</th> <th>header 3</th> <th>header 4</th> </tr> </thead> <tbody> <tr> <td>Cell 1-1: foo</td> <td>Cell 1-2: bar</td> <td>Cell 1-3: baz</td> <td>Cell 1-4: foo</td> </tr> <tr> <td>Cell 2-1: apples</td> <td>Cell 2-2: cherries</td> <td>Cell 2-3: bananas</td> <td>Cell 2-4: foo</td> </tr> <tr> <td>Cell 3-1: cars</td> <td>Cell 3-2: bar</td> <td>Cell 3-3: planes</td> <td>Cell 3-4: apples</td> </tr> <tr> <td>Cell 4-1: baz</td> <td>Cell 4-2: 2017</td> <td>Cell 4-3: 2010</td> <td>Cell 4-4: 2001</td> </tr> <tr> <td>Cell 5-1: cars</td> <td>Cell 5-2: 2017</td> <td>Cell 5-3: foo</td> <td>Cell 5-4: undefined</td> </tr> </tbody> </table>