Javascript 我应该如何修改我的searchbar代码以同时影响2个表，而不仅仅是1个表？
我有html代码，显示在第2页的搜索栏和2个表格上，每个都在单个搜索栏下面。键入短语后的searchbar1隐藏了表1中不可逆的所有内容，正如searchbar2对表2所做的那样 您可以在这里看到它是如何工作的： 我想以这样的方式修改代码，即在顶部只有一个搜索栏，在键入后将在两个表中同时显示所需的结果。可能吗 我尝试将Javascript 我应该如何修改我的searchbar代码以同时影响2个表，而不仅仅是1个表？,javascript,html,html-table,searchbar,Javascript,Html,Html Table,Searchbar,我有html代码，显示在第2页的搜索栏和2个表格上，每个都在单个搜索栏下面。键入短语后的searchbar1隐藏了表1中不可逆的所有内容，正如searchbar2对表2所做的那样 您可以在这里看到它是如何工作的： 我想以这样的方式修改代码，即在顶部只有一个搜索栏，在键入后将在两个表中同时显示所需的结果。可能吗 我尝试将mySearchFunction2（）的内容移动到mySearchFunction（）的mySearchFunction（）的内容下方，但是这种方法不起作用。我还试图改变： id=
mySearchFunction2（）mySearchFunction（）mySearchFunction（）的内容下方，但是这种方法不起作用。我还试图改变：
id=“myInput2”onkeyup=“mySearchFunction2（）”
id=“myInput”onkeyup=“mySearchFunction（）”
因此单击时的id和函数与第一个相同，尽管searchbar1仍然只隐藏第一个表的结果
<body>
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div><input type="text" id="myInput" onkeyup="mySearchFunction()" placeholder="Type channel name..."></div>
<div class="table100 ver6 m-b-110">
<table data-vertable="ver6" id="ContactsTable">
<thead>
<tr class="row100 head">
<th class="cell100 column1"><center><center>Provider</center></th>
<th class="cell100 column2"><center>Channels</center></th>
<th class="cell100 column3"><center>Email</center></th>
<th class="cell100 column4"><center>Phone</center></th>
<th class="cell100 column5"><center>Additional info</center></th>
</tr>
</thead>
<tbody>
<tr class="row100">
<td class="cell100 column1"><center><center>Example</center></td>
<td class="cell100 column2">
EXAMPLE
</br>EXAMPLE +EXAMPLE SD/HD
</br>EXAMPLE+ EXAMPLE SD/HD
</br>EXAMPLE+ EXAMPLE 2 HD
</br>EXAMPLE+ EXAMPLE SD/HD
</br>EXAMPLE+ EXAMPLE SD/HD
</br>EXAMPLE+ EXAMPLE HD
</br>EXAMPLE+ EXAMPLE HD
</td>
<td class="cell100 column3">
EXAMPLE@EXAMPLE.EXAMPLE
</td>
<td class="cell100 column4">
EXAMPLE
</br>EXAMPLE
</br>2EXAMPLE
</br>2EXAMPLE
</br>EXAMPLE</br> EXAMPLE </td>
<td class="cell100 column5"></td>
</tr>
<tr class="row100">
<td class="cell100 column1"><center><center>Example2</center></td>
<td class="cell100 column2">
EXAMPLE22
</br>EXAMPLE22 +EXAMPLE SD/HD
</br>EXAMPLE22+ EXAMPLE SD/HD
</br>EXAMPLE22+ EXAMPLE 2 HD
</br>EXAMPLE22+ EXAMPLE SD/HD
</br>EXAMPLE22+ EXAMPLE SD/HD
</br>EXAMPLE22+ EXAMPLE HD
</br>EXAMPLE22+ EXAMPLE HD
</td>
<td class="cell100 column3">
EXAMPLE@EXAMPLE.EXAMPLE
</td>
<td class="cell100 column4">
EXAMPLE
</br>EXAMPLE
</br>2EXAMPLE
</br>2EXAMPLE
</br>EXAMPLE</br> EXAMPLE </td>
<td class="cell100 column5"></td>
</tr>
</tbody>
</table>
</div>
<div class="limiter">
<div class="container-table100">
<div class="wrap-table100">
<div><input type="text" id="myInput2" onkeyup="mySearchFunction2()" placeholder="Type channel name..."></div>
<div class="table100 ver6 m-b-110">
<table data-vertable="ver6" id="ProvidersTable">
<thead>
<tr class="row100 head">
<th class="cell100 column1"><center>Provider</center></th>
<th class="cell100 column2"><center>Channels</center></th>
</tr>
</thead>
<tbody>
<tr class="row100">
<td class="cell100 column1"><center>EXAMPLE2TABLE</center></td>
<td class="cell100 column2">EXAMPLE2TABLE HD
</br>EXAMPLE2TABLE SPORTS HD
</br>EXAMPLE2TABLE EXTRA HD</td>
</tr>
<tr class="row100">
<td class="cell100 column1"><center>EXAMPLE2TABLE</center></td>
<td class="cell100 column2">EXAMPLE2TABLE.tv
</br>EXAMPLE2TABLE TV
</br>EXAMPLE2TABLE HD/SD
</br>EXAMPLE2TABLE Kids
</br>EXAMPLE2TABLE Kids Jr.</td></tr>
</tbody>
</table>
</div>
</tbody></table>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>
<script>
function mySearchFunction() {
// Declare variables
var input, filter, table, tr, td, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("ContactsTable");
tr = table.getElementsByTagName("tr");
// 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")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
//tried to move content of function below here
}
function mySearchFunction2() {
input = document.getElementById("myInput2");
filter = input.value.toUpperCase();
table = document.getElementById("ProvidersTable");
tr = table.getElementsByTagName("tr");
// 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")[1];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
</script>
供应商
渠道
电子邮件
电话
附加信息
例子
例子
示例+示例SD/HD
示例+示例SD/HD
示例+示例2高清
示例+示例SD/HD
示例+示例SD/HD
示例+示例HD
示例+示例HD
EXAMPLE@EXAMPLE.EXAMPLE
例子
示例
2示例
2示例
示例示例
例2
例22
示例22+示例SD/HD
示例22+示例SD/HD
示例22+示例2高清
示例22+示例SD/HD
示例22+示例SD/HD
示例22+示例HD
示例22+示例HD
EXAMPLE@EXAMPLE.EXAMPLE
例子
示例
2示例
2示例
示例示例
供应商
渠道
示例2表格
示例2表格HD
示例2表格运动高清
示例2表格额外高清
示例2表格
EXAMPLE2TABLE.tv
示例2平板电视
示例2表格HD/SD
示例2表格儿童
EXAMPLE2TABLE Kids Jr。
函数mySearchFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i、TXT值；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“ContactsTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
}
}
//尝试将函数的内容移到此处下方
}
函数mySearchFunction2（）{
输入=document.getElementById（“myInput2”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“ProvidersTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0