标签的 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. 检查当前行所有 <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 = "";
}
}
});
}</a>
✅ 关键改进说明：
- 使用 querySelectorAll("a[href]") 精准定位带 href 的链接，避免误匹配其他属性；
- 同时比对 link.href（解析后绝对 URL）和 getAttribute("href")（原始相对/绝对路径），提升兼容性；
- 引入 previousElementSibling 向上查找 .header 行，实现“无 ID 关联”的父子行联动；
- 先统一隐藏再选择性显示，避免 display: none 与 display: table-row 冲突导致样式异常。
此外，建议为 .header 行添加 display: table-row 显式声明（尤其当其初始为 display: none 时），并在 CSS 中补充：
tr.header { display: table-row; }
最后，注意 jQuery 折叠逻辑（slideToggle）与原生 display 控制可能存在冲突。若需深度集成，可统一使用原生方法控制 style.display，或在 myFunction() 执行前调用 $('.collapse').show() 重置状态，确保搜索结果始终可见。
该方案无需修改 HTML 结构、不依赖 id 或额外数据属性，轻量、可靠，适用于动态生成的嵌套表格场景。
