登录
首页 >  文章 >  前端

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

时间：2026-05-24 16:18:29 239浏览 收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《如何基于 将文本提取目标从 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. 检查当前行所有 <a> 标签的 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 = "";
      }
    }
  });
}

✅ 关键改进说明：

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

tr.header { display: table-row; }

最后，注意 jQuery 折叠逻辑（slideToggle）与原生 display 控制可能存在冲突。若需深度集成，可统一使用原生方法控制 style.display，或在 myFunction() 执行前调用 $('.collapse').show() 重置状态，确保搜索结果始终可见。

该方案无需修改 HTML 结构、不依赖 id 或额外数据属性，轻量、可靠，适用于动态生成的嵌套表格场景。

终于介绍完啦！小伙伴们，这篇关于《如何基于 标签的 href 属性值筛选表格并自动显示父行 》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！

资料下载
相关阅读
更多>
最新阅读
更多>
课程推荐
更多>