如何在多个表中进行搜索？我有这段代码，但这只适用于我的一张 table 。我总共有 2 个或更多表。
这是我在表格中搜索“某物”的代码。
<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>
这是我要在其中搜索的表格的 HTML 代码。
问题在于“myTable”只运行表 1 而不是其余的
<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>
如何在 HTML 中搜索多个表格？
最佳答案
您对两个表使用相同的 ID。
getElementById 函数只返回一个元素。
如果有多个表，则需要获取所有表并遍历所有表。
请检查:
window.onload = function(){
document.getElementById("myInput").addEventListener("input",myFunction)
}
function myFunction() {
// Declare variables
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
tables = document.querySelectorAll(".table");
tables.forEach(function(table) {
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 = "";
}
}
}
});
}<input type="text" id="myInput"/>
<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>
</table>关于javascript - 如何在 HTML 中搜索多个表格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58765905/