I have html code, that displays on page 2 searchbars and 2 tables, each below single searchbar. The searchbar1 after typing phrase hides everything that is irrevelant in table1, as the searchbar2 does it for table2.
You can see how it's working here: https://i.sstatic.net/zoHbf.jpg
I would like to modify the code in such way, that there will be only one searchbar at the top that after typing will show desired results in both tables at once. Is it possible?
I tried moving content of mySearchFunction2() to mySearchFunction() just below of content of the mySearchFunction(), however this approach is not working. I also tried to change:
id="myInput2" onkeyup="mySearchFunction2()" to
id="myInput" onkeyup="mySearchFunction()" so the same ID and function on click as the first one, although searchbar1 still hides results only from first table.
<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>
Thank you in advance for any suggestions bringing me closer to the solution.
I hope this piece of code works for you :)
<!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>