当前位置：首页 > 文章列表 > 文章 > 前端 > 如何基于标签的 href 属性值筛选表格并自动显示父行

如何基于  标签的 href 属性值筛选表格并自动显示父行

2026-05-24 16:18:29 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《如何基于标签的 href 属性值筛选表格并自动显示父行》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

如何基于 <a> 标签的 href 属性值筛选表格并自动显示父行标签的 href 属性值筛选表格并自动显示父行 " />

本文介绍如何扩展表格搜索功能，使其支持匹配标签的 href 属性值，并在子行匹配时自动显示其所属的父行（无需 id 依赖），通过修改文本提取逻辑与层级遍历实现精准过滤。

本文介绍如何扩展表格搜索功能，使其支持匹配 `` 标签的 `href` 属性值，并在子行匹配时自动显示其所属的父行（无需 `id` 依赖），通过修改文本提取逻辑与层级遍历实现精准过滤。

默认的表格搜索仅遍历单元格的可见文本（textContent），因此无法捕获中隐藏的 URL 值。要解决该问题，核心在于：将文本提取目标从 textContent 升级为 innerHTML，并补充对 href 属性的显式检索。

以下是优化后的 myFunction() 实现（兼容原逻辑，同时支持 href 匹配）：

function myFunction() {
  const input = document.getElementById("myInput");
  const filter = input.value.trim().toLowerCase();
  const table = document.getElementById("myTable");
  const rows = table.querySelectorAll("tbody tr");

  // 先全部隐藏（便于后续按需显示）
  rows.forEach(row => row.style.display = "none");

  if (!filter) return; // 空搜索不处理

  rows.forEach(row => {
    let match = false;

    // 1. 检查当前行所有  标签的 href 属性
    const links = row.querySelectorAll("a[href]");
    links.forEach(link => {
      if (link.href.toLowerCase().includes(filter) || 
          link.getAttribute("href")?.toLowerCase().includes(filter)) {
        match = true;
      }
    });

    // 2. 同时检查可见文本（兼容原有需求）
    if (!match) {
      const txtValue = row.textContent || row.innerText;
      if (txtValue.toLowerCase().includes(filter)) {
        match = true;
      }
    }

    // 3. 若匹配成功，显示当前行及其最近的父行（.header）
    if (match) {
      row.style.display = "";
      // 查找上方最近的 .header 行并显示
      let prev = row.previousElementSibling;
      while (prev && !prev.classList.contains("header")) {
        prev = prev.previousElementSibling;
      }
      if (prev && prev.classList.contains("header")) {
        prev.style.display = "";
      }
    }
  });
}

✅ 关键改进说明：
使用 querySelectorAll("a[href]") 精准定位带 href 的链接，避免误匹配其他属性；
同时比对 link.href（解析后绝对 URL）和 getAttribute("href")（原始相对/绝对路径），提升兼容性；
引入 previousElementSibling 向上查找 .header 行，实现“无 ID 关联”的父子行联动；
先统一隐藏再选择性显示，避免 display: none 与 display: table-row 冲突导致样式异常。

此外，建议为 .header 行添加 display: table-row 显式声明（尤其当其初始为 display: none 时），并在 CSS 中补充：