如何過濾/搜索 HTML 表格中的列？

Question

我已按照此鏈接了解如何創建/過濾搜索表。 但我想過濾搜索我自己表中的每一列。 目前，它只搜索 First Name 列。 我怎樣才能做到這一點？

這是代碼：

我的HTML：

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<table id="myTable">
    <tr class="header">
        <th> First Name </th>
        <th> Last Name </th> 
        <th> Age </th>
        <th> Language </th>
    </tr>
    <tr>
        <td>John</td>
        <td>Kole</td>
        <td>18</td>
        <td>English</td>
    </tr>
    <tr>
        <td>Pearl</td>
        <td>Shine</td>
        <td>50</td>
        <td>Hindi</td>
    </tr>
   <tr>
        <td>Jacob</td>
        <td>Pool</td>
        <td>22</td>
        <td>Arabic</td>
   </tr>
   <tr>
        <td>David</td>
        <td>Struff</td>
        <td>30</td>
        <td>German</td>
   </tr>
</table>

<script>
    function myFunction() {
        var input, filter, table, tr, td, i, txtValue;
        input = document.getElementById("myInput");
        filter = input.value.toUpperCase();
        table = document.getElementById("myTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[0];
            if (td) {
                txtValue = td.textContent || td.innerText;
                if (txtValue.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                    }
                else {
                    tr[i].style.display = "none";
                    }
                }       
            }
        }
</script>

如何過濾所有列以進行搜索？ 目前，它只搜索名字列。

Answer 1

檢查表行的每個節點，而不僅僅是檢查tr[i].getElementsByTagName("td")[0] 。 第零個節點對應於名字字段，這就是為什么搜索結果僅限於名字字段。而是搜索所有節點。

保留tr節點的類名稱為header同時隱藏該行。

 function myFunction() { var input, filter, table, tr, td, i, txtValue; input = document.getElementById("myInput"); filter = input.value.toUpperCase(); table = document.getElementById("myTable"); tr = table.getElementsByTagName("tr"); for (i = 0; i < tr.length; i++) { // td = tr[i].getElementsByTagName("td")[0]; alltags = tr[i].getElementsByTagName("td"); isFound = false; for(j=0; j< alltags.length; j++) { td = alltags[j]; if (td) { txtValue = td.textContent || td.innerText; if (txtValue.toUpperCase().indexOf(filter) > -1) { tr[i].style.display = ""; j = alltags.length; isFound = true; } } } if(!isFound && tr[i].className !== "header") { tr[i].style.display = "none"; } } }

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th> First Name </th> <th> Last Name </th> <th> Age </th> <th> Language </th> </tr> <tr> <td>John</td> <td>Kole</td> <td>18</td> <td>English</td> </tr> <tr> <td>Pearl</td> <td>Shine</td> <td>50</td> <td>Hindi</td> </tr> <tr> <td>Jacob</td> <td>Pool</td> <td>22</td> <td>Arabic</td> </tr> <tr> <td>David</td> <td>Struff</td> <td>30</td> <td>German</td> </tr> </table>

希望這是你正在尋找的。

Answer 2

這一行：

td = tr[i].getElementsByTagName("td")[0];

獲取第一個td ，它是表中第一列的內容，意思是 FirstName 列。 對所有td標簽進行循環，而不是僅獲取第一個標簽，您將獲得所需的功能。

Answer 3

獲取所有表格行。 循環遍歷這些行。 將每行<td>s所有innerText一起放入一個字符串中。 檢查字符串中第一次出現的搜索值。 如果未找到該值，則使用display: none else 隱藏該行，使用display: table-row顯示該display: table-row 。

例子

 const id = "myTable"; const selector = `#${id} tr:not(.header)`; // Get all rows const trs = document.querySelectorAll(selector); function myFunction(event) { let search = event.target.value.toLowerCase(); trs.forEach((tr) => { // Get all cells in a row let tds = tr.querySelectorAll("td"); // String that contains all td textContent from a row let str = Array.from(tds).map((td) => { return td.textContent.toLowerCase(); }).join(""); tr.style.display = (str.indexOf(search) > -1) ? "table-row" : "none"; }); }

 <input type="text" id="myInput" onkeyup="myFunction(event)" placeholder="Search for names.." title="Type in a name"> <table id="myTable"> <tr class="header"> <th> First Name </th> <th> Last Name </th> <th> Age </th> <th> Language </th> </tr> <tr> <td>John</td> <td>Kole</td> <td>18</td> <td>English</td> </tr> <tr> <td>Pearl</td> <td>Shine</td> <td>50</td> <td>Hindi</td> </tr> <tr> <td>Jacob</td> <td>Pool</td> <td>22</td> <td>Arabic</td> </tr> <tr> <td>David</td> <td>Struff</td> <td>30</td> <td>German</td> </tr> </table>