用JS过滤多个html表格

Question

我正在处理一个包含多个 Html 大型表格的页面。 为了过滤它们，我找到并修改了这个过滤表格每个单元格的脚本：

<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>

这里的问题是代码只在页面的第一个表格中有效，而在其他表格中无效。 我宁愿不要为每个表重复脚本个性化。 您对如何个性化脚本以在多个表中查找有什么建议吗？

编辑： 你知道有什么不同的脚本做同样的事情吗？

Answer 1

我已尝试解释我已更改的大部分内容。最后，代码本身有点短，但有点复杂。如果我做了不正确的假设，请告诉我。 （例如，我假设 'header' 类仅附加到包含 <th> elements) 的 <thead> 内的 <tr> 元素

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>

Answer 2

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 = "";
          }
        }
      }
    }