Comment puis-je rechercher dans plusieurs tableaux? J'ai ce code, mais cela ne fonctionne que pour une de mes tables. J'ai un total de 2 tables ou plus.

Ceci est mon code pour rechercher "quelque chose" dans ma 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>

Ceci est le code HTML des tables dans lequel j'essaie de rechercher.

Le problème réside dans le fait que "myTable" exécute uniquement les tables 1 à travers et non le reste

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

Comment puis-je rechercher dans plusieurs tableaux en HTML?

0
Hussnain Fareed 8 nov. 2019 à 14:41

4 réponses

Meilleure réponse

Vous utilisez le même identifiant pour les deux tables.

La fonction getElementById renvoie un seul élément.

S'il y a plusieurs tables, vous devez obtenir toutes les tables et parcourir toutes les tables.

S'il te plaît, vérifie cela:

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>
0
Sandip Patel 8 nov. 2019 à 12:34

Document.getElementById ("myInput") - recherche uniquement dans un élément

Essayez de rechercher une classe ... et obtenez de nombreux éléments.

".myTableClass"

0
cesarmarinhorj 8 nov. 2019 à 11:52
  1. Les identifiants doivent être uniques, donc n'utilisez pas l'identifiant 'myTable' pour les deux tables
  2. Obtenez les deux tables par sa classe 'table', puis vous pouvez parcourir les deux et appliquer la fonction de filtre:
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>
0
Mischa 8 nov. 2019 à 12:00

Vous pouvez essayer d'utiliser querySelectorAll. Il renvoie NodeList. document.querySelectorAll ("table.table tr") renvoie tous les TR de tous les éléments TABLE avec la table de classe.

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 = "";
		}
	}
}
0
Gennadii 8 nov. 2019 à 12:16