HTML表格JavaScript搜索筛选代码失效，求正确实现方案

原代码的问题 #

• 语法错误：tr.getElementByTagName("td") 拼写错误，正确写法是getElementsByTagName；且tr是元素集合，不能直接对整个集合调用该方法，需遍历单个tr元素
• 逻辑错误：目标是控制**整行表格行（tr）**的显示/隐藏，原代码操作的是单个单元格（td）的display属性，会破坏表格结构
• 覆盖不全：仅检测每个td内的第一个<a>标签，未覆盖td内的普通文本、多个<a>标签的情况；同时未排除表头行，会导致表头被错误隐藏

修正后的完整代码 #

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">
<table class="table table-striped" id="mytable">
  <thead>
    <tr>
      <th scope="col">Number</th>
      <th scope="col">google lnk</th>
      <th scope="col">Random number</th>
      <th scope="col">Software</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td><a href=https://google.com>Google</a></td>
      <td>4</td>
      <td><a><b>1</b></a></td>
    </tr>
    <tr>
      <td>2</td>
      <td><a href=bing.com>bing</a></td>
      <td>6</td>
      <td>
        <a href="facebook.com">facebook</a>,
        <a href="duckduckgo.com">duckduckgo</a>,
        <a href="nvdia.com/">nvdia</a>
      </td>
    </tr>
  </tbody>
</table>

<script>
function myFunction() {
  const input = document.getElementById("myInput");
  const filter = input.value.trim().toUpperCase();
  const table = document.getElementById("mytable");
  // 只获取tbody里的行，排除表头
  const rows = table.querySelectorAll("tbody tr");

  rows.forEach(row => {
    // 获取当前行所有文本内容（包括所有td和a标签的文本）
    const text = row.textContent.toUpperCase();
    // 判断是否包含关键词，控制行的显示/隐藏
    row.style.display = text.includes(filter) ? "" : "none";
  });
}
</script>

代码说明 #

1. 用querySelectorAll("tbody tr")精准获取表格主体的行，避免操作表头
2. 通过row.textContent直接获取整行的所有文本内容（自动包含所有td、a标签里的文本），无需逐个遍历单元格和标签
3. 用includes()替代indexOf()，逻辑更清晰直观
4. 对输入值做trim()处理，避免空字符干扰

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