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

【问题标题】：How can I search in multiple tables in HTML?如何在 HTML 中搜索多个表格？
【发布时间】：2019-11-08 11:41:45
【问题描述】：

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

【问题讨论】：

  • 首先，两个表不能使用相同的id。 id 必须是唯一的。例如，请改用 CSS 选择器。
  • 使用数据表datatables.net

标签： javascript html css search html-table


【解决方案1】：

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

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>

【讨论】：

    【解决方案2】：

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

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

    ".myTableClass"

    【讨论】：

      【解决方案3】：
      1. ID 必须是唯一的，所以不要对两个表都使用 id 'myTable'
      2. 通过其类“表”获取两个表，然后您可以遍历它们并应用您的过滤器功能：

      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>

      【讨论】：

        【解决方案4】：

        您可以尝试使用 querySelectorAll。它返回节点列表。 document.querySelectorAll("table.table tr") 返回所有具有类table的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 = "";
		}
	}
}

        【讨论】：

          猜你喜欢
          • 2011-03-12
          • 1970-01-01
          • 2018-04-02
          • 1970-01-01
          • 2020-09-18
          • 2018-03-28
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多
          热门标签
          Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode