基于<a>标签href属性过滤表格，子行匹配时显示对应父行

我想基于<a>标签的href属性过滤表格，当前代码能对表格显示列过滤并展示对应行，但无法匹配href属性里的字符串。比如搜索框搜Google时，要显示包含href="https://google.com"的行。另外，能不能不用id属性关联父行和子行，让搜索命中子行时自动显示对应的父行？

原始代码 #

HTML #

<body>
  <div>
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for website..">
    <button type="submit">Search</button>
  </div>

  <table border="0" id="myTable">
    <thead hidden>
      <tr>
        <th>Name</th>
        <th>URL</th>
      </tr>
    </thead>

    <tbody>
      <tr class="header clickable-row" style="cursor:pointer" data-toggle="true">
        <td colspan="2">
          <label style="cursor:pointer">Parent Row 1</label>
        </td>
      </tr>
      <tr class="hide collapse" style="display:none">
        <td>
          <h4>Column1</h4>
        </td>
        <td>
          <a class="connectorlink" href="https://google.com" target="_blank">website</a>
        </td>
      </tr>
      <tr class="hide collapse" style="display:none">
        <td>
          <h4>Column1</h4>
        </td>
        <td>
          <a class="connectorlink" href="https://yahoo.com" target="_blank">website</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

JavaScript #

$(document).ready(function() {
  $('tr.header').click(function() {
    $(this).nextUntil('tr.header').slideToggle(100);
  });
});

function myFunction() 
{
  // Declare variables
  var input, filter, table, tr, td, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");
  
  // Loop through all table rows, and hide those that don't match the search query
  for (i = 0; i < tr.length; i++) 
  {
   td = tr[i];
    if (td) {
      txtValue = td.textContent || td.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) 
      {
        tr[i].style.display = "";
      } 
      else 
      {
        tr[i].style.display = "none";
      }
    }
  }
}

CSS #

table,
tr,
td,
th {
  border-collapse: collapse;
}

h4 {
  margin: 0;
  padding: 0;
  font-family: Inter;
  font-style: normal;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}

label {
  padding: 10px 10px 10px 12px;
}

.tabledesign {
  width: 900px;
  border-collapse: separate;
  border-spacing: 0 15px;
  margin: 50px auto;
}

th {
  background: #e5e5e5;
  color: rgba(0, 0, 0, 0.84);
  font-weight: bold;
}

td,
th {
  padding: 10px;
  border: 1px solid #ccc;
  text-align: left;
  font-size: 18px;
}

#myInput {
  display: flex;
  background: #FFFFFF;
  font-family: Inter;
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 795px;
  height: 46px;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

* {
  box-sizing: border-box;
}

解决方案 #

修改myFunction函数，同时处理href属性匹配和父行自动显示的需求，利用jQuery的DOM遍历方法实现更简洁的逻辑：

function myFunction() {
  const filter = $("#myInput").val().toUpperCase();
  const $allRows = $("#myTable tr");
  
  // 先隐藏所有行
  $allRows.hide();
  
  // 遍历所有子行（非header的行）
  $("#myTable tr:not(.header)").each(function() {
    const $row = $(this);
    const rowText = $row.text().toUpperCase();
    const linkHref = $row.find("a.connectorlink").attr("href")?.toUpperCase() || "";
    
    // 匹配文本内容或href属性
    if (rowText.includes(filter) || linkHref.includes(filter)) {
      // 显示当前子行
      $row.show();
      // 显示对应的父行（当前子行上方最近的header行）
      $row.prevAll(".header").first().show();
    }
  });
  
  // 搜索框为空时，恢复初始状态
  if (!filter) {
    $allRows.show();
    // 重置子行折叠状态
    $("#myTable tr.collapse").hide();
  }
}

关键修改说明 #

1. 匹配href属性：通过$row.find("a.connectorlink").attr("href")获取链接地址，转为大写后与搜索关键词比对，实现href内容的搜索匹配。
2. 自动显示父行：用$row.prevAll(".header").first()定位当前子行的对应父行，匹配时直接显示该父行，无需额外id关联。
3. 空搜索重置：搜索框清空时，恢复所有行显示，并将子行重置为初始折叠状态。
4. 简化DOM操作逻辑，用jQuery选择器替代原生循环，代码更易读维护。

内容的提问来源于stack exchange，提问作者Dazzler