我应该如何修改我的搜索栏代码以同时影响 2 个表，而不仅仅是 1 个?

我有html代码，显示在第2页搜索栏和2个表格上，每个表格都在单个搜索栏下方。键入短语后的搜索栏 1 会隐藏表 1 中所有无关紧要的内容，就像搜索栏 2 对表 2 所做的那样。

您可以在此处查看它的工作原理：https://i.stack.imgur.com/zoHbf.jpg

我想以这样的方式修改代码，即顶部只有一个搜索栏，键入后将同时在两个表中显示所需的结果。可能吗？

我尝试将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>

提前感谢您的任何建议，使我更接近解决方案。

我希望这段代码对你有用:)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<style>
.center {
margin: auto;
width: 50%;
padding: 10px;
}
</style>
</head>
<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>
<script>
function mySearchFunction() {
mySearchFunction2();
// 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("myInput");
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>
</body>
</html>

相关内容

最新更新

热门标签：