Javascript 如何在HTML中搜索多个表？

如何在多个表中搜索？我有这段代码，但这只适用于我的一个表。我总共有两张或更多的桌子

这是我在表格中搜索“某物”的代码

<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>

函数myFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“myTable”）；
tr=table.getElementsByTagName（“tr”）；
//循环遍历所有表行，并隐藏与搜索查询不匹配的行
对于（i=0；i-1）{
匹配=真；
打破
}
}
如果（！匹配）{
tr[i].style.display=“无”；
}否则{
tr[i].style.display=“”；
}
}
}
}

这是我试图搜索的表格的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>

外交部长
办公室
　　　　
　　　　名称
　　　　名称
电话
传真
外交部长
长库雷希
051-9210335
051-9207600
　　　　
051-9203824
　　附加秘书（FMO）
阿迈尔·胡拉姆·拉托尔
051-9210335
总监（渔业管理处）
赛义德·穆斯塔法·拉巴尼
051-9207762
　
　　　　　　
助理。处长（渔业管理处）
穆罕默德·萨阿德·艾哈迈德
051-9207617
PS到FM
穆罕默德·巴希尔·基亚尼
051-9207762
　　　　
　　　　
　　　　
　　　　
　　　　　议会秘书　办公室
　　　　    
　　　　名称
名称
电话
传真
外交部长
长库雷希
051-9210335
051-9207600
051-9203824
　　　 附加秘书（FMO）
阿迈尔·胡拉姆·拉托尔
051-9210335
总监（渔业管理处）
赛义德·穆斯塔法·拉巴尼
051-9207762
助理。处长（渔业管理处）
穆罕默德·萨阿德·艾哈迈德
051-9207617
PS到FM
穆罕默德·巴希尔·基亚尼
051-9207762

如何在HTML中搜索多个表

document.getElementById（“myInput”）-仅在一个元素中搜索

尝试搜索一个类…并获得许多元素

“.myTableClass”

id必须是唯一的，因此不要对两个表都使用id“myTable”

通过其类“table”获取两个表，然后您可以迭代这两个表并应用your filter函数：

函数过滤器（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
tables=document.getElementsByClassName（“表”）；
对于（var k=0；k-1）{
匹配=真；
打破
}
}
如果（！匹配）{
tr[i].style.display=“无”；
}否则{
tr[i].style.display=“”；
}
}
}
}
}

搜索：
外交部长办公室
任命
名称
电话
传真
外交部长
长库雷希
051-9210335
051-9207600
051-9203824
附加秘书（FMO）
阿迈尔·胡拉姆·拉托尔
051-9210335
总监（渔业管理处）
赛义德·穆斯塔法·拉巴尼
051-9207762
助理。处长（渔业管理处）
穆罕默德·萨阿德·艾哈迈德
051-9207617
PS到FM
穆罕默德·巴希尔·基亚尼
051-9207762
议会秘书办公室
任命
名称
电话
传真