如何让我的搜索功能从表格中过滤搜索到的项目？

Question

我制作了一个表格，里面装满了从 JSON 文件中检索到的数据。 现在我正在尝试制作一个过滤搜索项目的搜索栏，并且只显示搜索项目的表格行。 我现在使用的函数的代码是：

//Search function
          function searchTable() {
        var input, filter, found, table, tr, td, i, j;
        input = document.getElementsByClassName("searchBar");
        filter = input.value.toUpperCase();
        table = document.getElementById("productTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                }
            }
            if (found) {
                tr[i].style.display = "";
                found = false;
            } else {
                tr[i].style.display = "none";
            }
        }
    }
});

这是我尝试将过滤器应用于的表格的 HTML：

<input class="form-control searchBar" type="text" name="search" placeholder="search">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Product Name</th>
                            <th scope="col">Free Stock</th>
                            <th scope="col">Price</th>
                            <th scope="col">Actions</th>
                        </tr>
                        </thead>
                        <tbody id="productTable">
                        <tr>
                        </tr>
                        </tbody>
                    </table>

Answer 1

这是在覆盖所有表（表中的所有 td、tr）、纯 javascript 和尽可能短的同时在 HTML 表中搜索的最佳解决方案：

 <body style="background:red;"> <input id='myInput' onkeyup='searchTable()' type='text'> <table id='myTable'> <thead> <tr> <th scope="col">#</th> <th scope="col">Product Name</th> <th scope="col">Free Stock</th> <th scope="col">Price</th> <th scope="col">Actions</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Green</td> <td>Lorem</td> <td>Ipsum</td> <td>button</td> </tr> <tr> <td>2</td> <td>Green</td> <td>elit</td> <td>Mumbai</td> <td>button</td> </tr> <tr> <td>3</td> <td>Green</td> <td>sud</td> <td>Dummy</td> <td>button</td> </tr> </tbody> </table> <script> function searchTable() { var input, filter, found, table, tr, td, i, j; 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"); for (j = 0; j < td.length; j++) { if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) { found = true; } } if (found) { tr[i].style.display = ""; found = false; } else { tr[i].style.display = "none"; } } } </script> </body>

Answer 2

问题是 getElementsByClassName 不返回元素。 相反，它返回一个 NodeList。 如果您只有一个 class="searchBar" 的元素，那么您可以引用为：

input = document.getElementsByClassName("searchBar")[0];

使用现有 ID 更新的脚本是

function searchTable() {
        var input, filter, found, table, tr, td, i, j;
        input = document.getElementsByClassName("searchBar")[0];
        filter = input.value.toUpperCase();
        table = document.getElementById("productTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td");
            for (j = 0; j < td.length; j++) {
                if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
                    found = true;
                }
            }
            if (found) {
                tr[i].style.display = "";
                found = false;
            } else {
                tr[i].style.display = "none";
            }
        }
    }

但是，如果您只想拥有这些元素中的一个，我建议给它一个 id 并使用 getElementById，然后您将实际获得一个元素。

如何让我的搜索功能从表格中过滤搜索到的项目？

问题描述

2 个解决方案

解决方案1
1 2020-09-11 12:08:01

解决方案2
0 已采纳 2020-09-11 13:07:44

如何让我的搜索功能从表格中过滤搜索到的项目？

问题描述

2 个解决方案

解决方案1 1 2020-09-11 12:08:01

解决方案2 0 已采纳 2020-09-11 13:07:44

解决方案1
1 2020-09-11 12:08:01

解决方案2
0 已采纳 2020-09-11 13:07:44