如何实现 HTML 表格中搜索与复选框过滤的协同联动-js教程-PHP中文网

如何实现 HTML 表格中搜索与复选框过滤的协同联动

本文详解如何让表格的关键词搜索（myFunction）与类别复选框过滤（jQuery）协同工作——即先筛选指定类别，再在该子集中进行关键词搜索，避免两者相互重置，确保过滤逻辑叠加生效。

本文详解如何让表格的关键词搜索（`myfunction`）与类别复选框过滤（jquery）协同工作——即先筛选指定类别，再在该子集中进行关键词搜索，避免两者相互重置，确保过滤逻辑叠加生效。

要实现搜索与复选框过滤的真正联动（而非各自独立运行），关键在于：所有过滤操作必须基于同一动态筛选上下文——即“当前被选中的类别集合”。原代码中，myFunction 遍历全部行且无视复选框状态；而复选框事件又未影响后续搜索逻辑，导致二者冲突。解决方案是抽象出一个统一的状态获取函数 getCheckedItems()，并在搜索和显示逻辑中同时依赖它。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

✅ 核心改进点

统一状态管理：新增 getCheckedItems() 函数，返回所有已勾选复选框的 value 值数组（如 ["For attorneys", "For patients and families"]）；
搜索逻辑升级：myFunction() 不再仅匹配关键词，而是双重校验——既要 textContent 包含关键词，又要其对应的文本属于 getCheckedItems() 返回的类别列表；
复选框响应简化：$(document).ready() 中的监听逻辑改为遍历所有，依据 getCheckedItems() 动态决定显隐，避免冗余 DOM 查找；
兼容性保障：使用 $(this).find("td:eq(1)").html() 安全获取类别单元格内容（索引 1 对应第二列），并严格判断非空值，防止 undefined 导致 .includes() 报错。

? 完整可运行代码（含注释）

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>
  // 【核心】获取当前所有已勾选的类别值数组
  function getCheckedItems() {
    const checked = [];
    $('input[type="checkbox"][value]').each(function() {
      if ($(this).is(':checked')) {
        checked.push($(this).val());
      }
    });
    return checked;
  }

  // 【搜索函数】支持与复选框联动的关键词过滤
  function myFunction() {
    const input = document.getElementById("myInput");
    const filter = input.value.toUpperCase();
    const table = document.getElementById("myTable");
    const rows = table.getElementsByTagName("tr");

    for (let i = 0; i < rows.length; i++) {
      const tds = rows[i].getElementsByTagName("td");
      // 跳过表头行（无 td[0] 或 td[1]）
      if (!tds[0] || !tds[1]) continue;

      const contentText = (tds[0].textContent || tds[0].innerText).toUpperCase();
      const categoryText = $(rows[i]).find("td:eq(1)").text().trim(); // 更健壮：用 .text() 替代 .html()

      // ✅ 双重条件：关键词匹配 + 类别在已选集合中
      if (contentText.indexOf(filter) > -1 && getCheckedItems().includes(categoryText)) {
        rows[i].style.display = "";
      } else {
        rows[i].style.display = "none";
      }
    }
  }

  // 【复选框监听】实时更新可见行（仅显示选中类别的行）
  $(document).ready(function() {
    $('input[type="checkbox"][value]').change(function() {
      $("tr").each(function() {
        const categoryText = $(this).find("td:eq(1)").text().trim();
        if (getCheckedItems().includes(categoryText)) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
    });
  });

  // 【全选/取消全选】触发 change 事件以同步状态
  function checkedAll() {
    const checkboxes = this.form.querySelectorAll('input[type="checkbox"][value]');
    const isChecked = this.checked;
    checkboxes.forEach(cb => {
      cb.checked = isChecked;
      $(cb).trigger("change");
    });
  }
</script>