How can I search in multiple tables? I have this code, but this only works for one of my tables. I have a total of 2 or more tables.
This is my code for search after "something" in my table.
<script>
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
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++) {
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>
This is the HTML Code of Tables in which I am trying to search.
The problem lies in "myTable"only run Tables 1 through and not the remaining
<table class="table" style="text-align: left;" id="myTable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<h4 style="text-align: center;"><strong>FOREIGN MINISTER’S
OFFICE</strong></h4>
<div id="A">
<tr>
<td><strong><h5>Designation</strong></h5></td>
<td><strong><h5>Name</strong></h5></td>
<td><strong><h5>Phone</strong></h5></td>
<td><strong><h5>Fax</strong></h5></td>
</tr>
<tr>
<td>Foreign Minister</td>
<td>Makhdoom Shah Mahmood Qureshi</td>
<td>051-9210335</td>
<td>051-9207600</td>
</tr>
<tr>
<td></td>
<td></td>
<td>051-9203824</td>
<td></td>
</tr>
<tr>
<td>Additional Secretary (FMO)</td>
<td>Ameer Khurram Rathore</td>
<td>051-9210335</td>
<td></td>
</tr>
<tr>
<td>Director (FMO)</td>
<td>Syed Mustafa Rabbani</td>
<td>051-9207762</td>
<td></td>
</tr>
<tr>
<td>Asstt. Dir (FMO)</td>
<td>Muhammad Saad Ahmed</td>
<td>051-9207617</td>
<td></td>
</tr>
<tr>
<td>PS to FM</td>
<td>Muhammad Bashir Kiyani</td>
<td>051-9207762</td>
<td></td>
</tr>
</div>
</tbody>
</table>
<table class="table" style="text-align: left;" id="myTable">
<thead>
<tr>
</tr>
</thead>
<tbody>
<h4 style="text-align: center;"><strong>PARLIAMENTRY SECRETARY’S OFFICE</strong></h4>
<div id="B">
<tr>
<td><strong><h5>Designation</strong></h5></td>
<td><strong><h5>Name</strong></h5></td>
<td><strong><h5>Phone</strong></h5></td>
<td><strong><h5>Fax</strong></h5></td>
</tr>
<tr>
<td>Foreign Minister</td>
<td>Makhdoom Shah Mahmood Qureshi</td>
<td>051-9210335</td>
<td>051-9207600</td>
</tr>
<tr>
<td></td>
<td></td>
<td>051-9203824</td>
<td></td>
</tr>
<tr>
<td>Additional Secretary (FMO)</td>
<td>Ameer Khurram Rathore</td>
<td>051-9210335</td>
<td></td>
</tr>
<tr>
<td>Director (FMO)</td>
<td>Syed Mustafa Rabbani</td>
<td>051-9207762</td>
<td></td>
</tr>
<tr>
<td>Asstt. Dir (FMO)</td>
<td>Muhammad Saad Ahmed</td>
<td>051-9207617</td>
<td></td>
</tr>
<tr>
<td>PS to FM</td>
<td>Muhammad Bashir Kiyani</td>
<td>051-9207762</td>
<td></td>
</tr>
</div>
</tbody>
How can I search in multiple tables in HTML?