JavaScript表格搜索功能故障排查：onkeyup事件无法检索第二列患者姓名

首先，你的搜索功能失效主要有两个核心问题：HTML结构不合法，以及JavaScript代码存在潜在错误，咱们一步步来解决：

1. 修复不合法的HTML表格结构 #

HTML规范里，<tbody>的直接子元素只能是<tr>，你用<div class="grid">包裹数据行是无效的，这会导致table.getElementsByTagName('tr')只能获取到表头那一行，完全读不到下面的患者数据行。

修正后的表格代码：

<table id="table" width="100%">
  <tbody>
    <tr class="table-heading">
      <td>
        <div>
          <p>ID</p>
        </div>
      </td>
      <td>
        <div>
          <p>Patient name</p>
        </div>
      </td>
      <td>
        <div>
          <p>NIC</p>
        </div>
      </td>
      <td>
        <div>
          <p>Date of Birth</p>
        </div>
      </td>
      <td>
        <div>
          <p>Address.</p>
        </div>
      </td>
      <td>
        <div>
          <p>Username</p>
        </div>
      </td>
      <td>
        <div>
          <p>Status</p>
        </div>
      </td>
    </tr>
    <!-- 去掉包裹的div，直接放tr -->
    <tr>
      <td>
        <div>
          <p>1</p>
        </div>
      </td>
      <td>
        <div>
          <p>Kumar K</p>
        </div>
      </td>
      <td>
        <div>
          <p>654561</p>
        </div>
      </td>
      <td>
        <div>
          <p>1995-05-21</p>
        </div>
      </td>
      <td>
        <div>
          <p>the avenue</p>
        </div>
      </td>
      <td>
        <div>
          <p>random</p>
        </div>
      </td>
      <td>
        <div>
          <p>active</p>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <p>2</p>
        </div>
      </td>
      <td>
        <div>
          <p>Ravi R</p>
        </div>
      </td>
      <td>
        <div>
          <p>98741262</p>
        </div>
      </td>
      <td>
        <div>
          <p>1996-05-22</p>
        </div>
      </td>
      <td>
        <div>
          <p>the street</p>
        </div>
      </td>
      <td>
        <div>
          <p>real</p>
        </div>
      </td>
      <td>
        <div>
          <p>inactive</p>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div>
          <p>3</p>
        </div>
      </td>
      <td>
        <div>
          <p>Sanjay U</p>
        </div>
      </td>
      <td>
        <div>
          <p>575305</p>
        </div>
      </td>
      <td>
        <div>
          <p>1993-05-28</p>
        </div>
      </td>
      <td>
        <div>
          <p>the house</p>
        </div>
      </td>
      <td>
        <div>
          <p>normal</p>
        </div>
      </td>
      <td>
        <div>
          <p>active</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

2. 优化JavaScript代码（修复逻辑问题） #

原来的代码有两个小问题：

• 会遍历表头行，导致输入关键词时表头可能被隐藏
• 直接获取tr[i].getElementsByTagName('td')[1]，如果某行没有第二个td会报错

优化后的JS代码：

document.getElementById("search").onkeyup = function() {
  const filter = this.value.toUpperCase(); // 直接用this，不用重复获取元素
  const table = document.getElementById('table');
  const trList = table.querySelectorAll('tbody tr:not(.table-heading)'); // 只遍历数据行，排除表头

  trList.forEach(tr => {
    const td = tr.getElementsByTagName('td')[1];
    if (td) {
      const textValue = td.textContent.trim().toUpperCase(); // 去掉空格，避免干扰
      tr.style.display = textValue.includes(filter) ? "" : "none";
    }
  });
};

优化点说明： #

• 用this.value替代重复调用document.getElementById('search')，更简洁
• 用querySelectorAll精准选择数据行（排除表头），避免表头被隐藏
• 增加trim()处理文本，避免多余空格影响搜索匹配
• 使用includes()替代indexOf() > -1，代码更易读

现在你再测试一下，搜索功能应该就能正常工作了！

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