如何解决JS过滤表格关闭搜索栏后过滤状态未清除的问题？

云上老周

2026-8-20

解决方案

1. 重构JS逻辑，封装过滤与重置函数

把过滤逻辑封装成可复用函数，同时新增专门重置表格显示的函数，方便后续调用：

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;
      tr[i].style.display = txtValue.toUpperCase().indexOf(filter) > -1 ? "" : "none";
    }
  }
}

// 重置表格，显示所有行
function resetTable() {
  var table = document.getElementById("myTable");
  var tr = table.getElementsByTagName("tr");
  for (var i = 0; i < tr.length; i++) {
    tr[i].style.display = "";
  }
  // 同步清空输入框（可选，表单reset也会触发此操作）
  document.getElementById("myInput").value = "";
}

2. 修改HTML，让重置按钮触发表格恢复

给表单添加onreset事件，同时给重置按钮绑定点击逻辑，确保清空输入框时同步恢复表格：

<form class="search-box" onreset="resetTable()">
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for a command.."/>
    <button type="reset">重置</button>
</form>

3. 绑定搜索栏关闭事件

假设你通过点击按钮或隐藏容器来关闭搜索栏，在关闭逻辑中调用resetTable即可：

// 示例：假设关闭按钮id为close-search
document.getElementById("close-search").addEventListener("click", function() {
  // 隐藏搜索栏的逻辑（比如添加隐藏类）
  document.querySelector(".search-box").classList.add("hidden");
  // 重置表格显示
  resetTable();
});