Как я могу искать в нескольких таблицах в HTML? - PullRequest
Новая
       33

Как я могу искать в нескольких таблицах в HTML?

0 голосов
/ 08 ноября 2019

Как я могу искать в нескольких таблицах? У меня есть этот код, но он работает только для одной из моих таблиц. У меня всего 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?

Ответы [ 4 ]

0 голосов
/ 08 ноября 2019

Вы используете один и тот же идентификатор для обеих таблиц.

Функция 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>
0 голосов
/ 08 ноября 2019
  1. Идентификаторы должны быть уникальными, поэтому не используйте идентификатор 'myTable' для обеих таблиц
  2. Получите обе таблицы по их классу 'table', тогда вы можете выполнить итерации по обеим из них и применить функцию filter:

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 голосов
/ 08 ноября 2019

Вы можете попробовать использовать querySelectorAll. Возвращает NodeList. document.querySelectorAll ("table.table tr") возвращает все TR всех элементов 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 = "";
		}
	}
}
0 голосов
/ 08 ноября 2019

document.getElementById ("myInput") - поиск только в одном элементе

попробуйте найти класс ... и получить много элементов.

". MyTableClass"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...