Javascript 使用JS过滤多个html表

我正在处理一个包含大量Html表格的页面。 为了过滤它们，我找到并改编了这个脚本，该脚本针对表中的每个单元格进行过滤：

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

函数searchtable（）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
th=table.getElementsByTagName（“th”）；
对于（i=1；i-1）{
匹配=真；
打破
}
}
如果（！匹配）{
tr[i].style.display=“无”；
}否则{
tr[i].style.display=“”；
}
}
}
}

这里的问题是代码只在页面的第一个表中工作，而不在其他表中工作。 我不想对每个表重复脚本个性化设置。 对于如何个性化脚本以在多个表中查找，您有什么建议吗

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

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

html:

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

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

js:

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

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

var table1=document.getElementById（“table1”）；
var table2=document.getElementById（“table2”）；
搜索表（表1）；
搜索表（表2）；
函数搜索表（表）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
tr=table.getElementsByTagName（“tr”）；
th=table.getElementsByTagName（“th”）；
对于（i=1；i-1）{
匹配=真；
打破
}
}
如果（！匹配）{
tr[i].style.display=“无”；
}否则{
tr[i].style.display=“”；
}
}
}
}

html：

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

js:

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

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

var table1=document.getElementById（“table1”）；
var table2=document.getElementById（“table2”）；
搜索表（表1）；
搜索表（表2）；
函数搜索表（表）{
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
tr=table.getElementsByTagName（“tr”）；
th=table.getElementsByTagName（“th”）；
对于（i=1；i-1）{
匹配=真；
打破
}
}
如果（！匹配）{
tr[i].style.display=“无”；
}否则{
tr[i].style.display=“”；
}
}
}
}

我试图解释我更改的大部分部分。最后，代码本身要短一点，但要复杂一点。如果我的假设不正确，请告诉我。（例如，我假设'header'类只与包含

元素的
中的
元素匹配）

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

var searchTable=函数searchTable（表，输入）{
//因为我们绑定了输入，所以可以使用input.value将当前单词输入到输入中。
var filter=input.value，
//桌子既有桌子又有桌子。
//通过仅从正文中选择tr节点，我们可以删除整个“检查这是否是`tr.classList.contains（'header'）的头tr逻辑”`
//请记住，querySelector返回一个节点列表，所以如果我们想使用数组方法，我们需要将它转换成一个真正的数组。
//原始代码使用getElementsByTagName，它返回一个活动节点列表，请注意这个差异。
rows=Array.prototype.slice.call（table.queryselectoral（'tbody tr'）；
rows.forEach（函数（行）{
//因为我们不关心fitler包含在哪个单元格中，所以我们可以检查整行的innerHTML。
//仅当输入中键入的过滤器为“tr”或“td”时，此操作才会失败
var hide=（row.innerHTML.indexOf（filter）=-1）；
//另一种方法是实际检查每个单元格，但这会使脚本花费更长的时间：
//var hide=！Array.prototype.slice.call（row.querySelectorAll（'td'））.some（函数（单元格）{
//返回（cell.innerHTML.indexOf（filter）！=-1）；
// });
if（隐藏）row.classList.add（'gone'）；
else if（row.classList.contains（'gone'））row.classList.remove（'gone'）；
});
},
//helper函数，我们可以使用它将searchTable函数绑定到我们想要的任何表和输入
//我们添加了一个onchange事件监听器，向它传递一个绑定版本的searchTable。
bindSearch=函数bindSearch（tableID，inputID）{
变量输入=document.querySelector（inputID），
table=document.querySelector（tableID）；
if（table&&input）input.addEventListener（'change'，searchTable.bind（null，table，input））；
else警报（'表或输入不存在'）；
};
//只要使用正确的ID调用bindSearch，我们就可以添加任意数量的单个输入/表。
bindSearch（“#表1”，“输入1”）；
bindSearch（“#表2”，“输入2”）
。消失了{
显示：无；
}

标题1
标题2
标题3
标题4