时间戳

首页 > 解决方案 > 如何让我的搜索功能工作以过滤表中的搜索项目？

javascript - 如何让我的搜索功能工作以过滤表中的搜索项目？

问题描述

我制作了一个表格，其中填充了从 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>

标签： javascripthtmljquerycss

解决方案

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

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

推荐阅读