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

Question

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?

Answer 1

document.getElementById("myInput") - search only in one element

try search for a class...and get many elements.

".myTableClass"

Answer 2

1. IDs must be unique so dont use the id 'myTable' for both tables
2. Get both tables by its class 'table' then u can iterate over both of them and apply the your filterfunction:

 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

You can try to use querySelectorAll. It returns NodeList. document.querySelectorAll("table.table tr") returns all TR of all TABLE elements with class table.

 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

You are using same id for both table.

getElementById function return one element only.

If there is multiple tables then you need to get all tables and iterate over all tables.

Please check this:

 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>