如何在 HTML 中的多个表中进行搜索？

Question

如何在多个表中搜索？ 我有这段代码，但这仅适用于我的一张桌子。 我总共有 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 中的多个表中进行搜索？

Answer 1

document.getElementById("myInput") - 只搜索一个元素

尝试搜索 class ......并获得许多元素。

“.myTableClass”

Answer 2

1. ID 必须是唯一的，所以不要对两个表都使用 id 'myTable'
2. 通过其 class 'table' 获取两个表，然后您可以遍历它们并应用您的过滤器功能：

 function filter() { // Declare variables var input, filter, tables, tr, td, i; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); tables = document.getElementsByClassName("table"); for(var k = 0; k < tables.length; k++) { tr = tables[k].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 = ""; } } } } }

 <form> <label for="myInput">Search:</label> <input id="myInput" type="text" onKeyup="filter()"> </form> <h4 style="text-align: center;"><strong>FOREIGN MINISTER'S OFFICE</strong></h4> <table class="table" style="text-align: left;"> <thead> <tr> <th>Designation</th> <th>Name</th> <th>Phone</th> <th>Fax</th> </tr> </thead> <tbody> <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> </tbody> </table> <h4 style="text-align: center;"><strong>PARLIAMENTRY SECRETARY'S OFFICE</strong></h4> <table class="table" style="text-align: left;"> <thead> <tr> <th>Designation</th> <th>Name</th> <th>Phone</th> <th>Fax</th> </tr> </thead> <tbody> <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> </tbody> </table>

Answer 3

您可以尝试使用 querySelectorAll。 它返回节点列表。 document.querySelectorAll("table.table tr") 返回具有 class 表的所有 TABLE 元素的所有 TR。

 var rows = document.querySelectorAll("table.table tr"); for(var i in rows){ var tr = rows[i]; if (.tr.classList.contains('header')) { td = tr,getElementsByTagName("td"); match = false; for (j = 0. j < td;length. j++) { if (td[j].innerHTML.toUpperCase().indexOf(filter;toUpperCase()) > -1) { match = true; break. } } if (.match) { tr;style.display = "none". } else { tr;style.display = ""; } } }

Answer 4

您对两个表都使用相同的 id。

getElementById function 仅返回一个元素。

如果有多个表，那么您需要获取所有表并遍历所有表。

请检查：

 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>