如何用JavaScript实现表格单列动态切换搜索功能？

我需要实现点击按钮切换表格不同列进行搜索的功能，目前只能手动修改代码里td的索引（比如把[0]改成[1]）来指定搜索列，想通过JavaScript让这个功能动态起来，每次只搜索单一列（比如只搜FirstName、Nationality这些列）。我20年前做过Web开发，现在重新捡起来，下面是优化后的完整方案：

优化后的HTML代码 #

<div class="w3-container">
  <h2>All Information</h2>

  <div class="w3-bar">
    <button class="w3-button w3-black active" style="width: 10%" data-column="0">#</button>
    <button class="w3-button w3-teal" style="width: 10%" data-column="1">First Name</button>
    <button class="w3-button w3-red" style="width: 10%" data-column="2">Last Name</button>
    <button class="w3-button w3-yellow" style="width: 10%" data-column="3">Address</button>
    <button class="w3-button w3-green" style="width: 10%" data-column="4">Age</button>
    <button class="w3-button w3-blue" style="width: 10%" data-column="5">Date of Birth</button>
    <button class="w3-button w3-purple" style="width: 10%" data-column="6">Nationality</button>
  </div>

  <input id="myInput" placeholder="Search by ID Number..." title="Type in a value" type="text">

  <table id="myTable">
    <tr class="header">
      <th class="w3-center" style="width: 2%;">#</th>
      <th style="text-align: left; width: 17%;">First Name</th>
      <th style="text-align: left; width: 17%;">Last Name</th>
      <th style="text-align: left; width: 16%;">Address</th>
      <th style="text-align: left; width: 16%;">Age</th>
      <th style="text-align: left; width: 16%;">Date of Birth</th>
      <th style="text-align: left; width: 16%;">Nationality</th>
    </tr>
    <tr>
      <td class="w3-center">1</td>
      <td>John</td>
      <td>Smith</td>
      <td>Pearse Street</td>
      <td>45</td>
      <td>01/10/1977</td>
      <td>English</td>
    </tr>
    <tr>
      <td class="w3-center">11</td>
      <td>Tim</td>
      <td>Green</td>
      <td>Rosedale Avenue</td>
      <td>23</td>
      <td>17/04/1999</td>
      <td>American</td>
    </tr>
    <tr>
      <td class="w3-center">114</td>
      <td>Tom</td>
      <td>Deane</td>
      <td>Greenwood Road</td>
      <td>42</td>
      <td>27/11/1980</td>
      <td>English</td>
    </tr>
    <tr>
      <td class="w3-center">208</td>
      <td>Anna</td>
      <td>Green</td>
      <td>Rosedale Avenue</td>
      <td>23</td>
      <td>11/06/1999</td>
      <td>Scottish</td>
    </tr>
    <tr>
      <td class="w3-center">259</td>
      <td>Rachel</td>
      <td>Waters</td>
      <td>Station Road</td>
      <td>87</td>
      <td>11/02/1936</td>
      <td>Irish</td>
    </tr>
    <tr>
      <td class="w3-center">1</td>
      <td>George</td>
      <td>Taylor</td>
      <td>Beach Avenue</td>
      <td>52</td>
      <td>30/07/1971</td>
      <td>South African</td>
    </tr>
    <tr>
      <td class="w3-center">1</td>
      <td>Neil</td>
      <td>Smyth</td>
      <td>Beach Road</td>
      <td>6</td>
      <td>15/12/2016</td>
      <td>Australian</td>
    </tr>
    <tr>
      <td class="w3-center">1</td>
      <td>Sarah</td>
      <td>Smyth</td>
      <td>Beach Road</td>
      <td>30</td>
      <td>06/01/1993</td>
      <td>Australian</td>
    </tr>
  </table>
</div>

优化后的JavaScript代码 #

// 保存当前选中的列索引，默认是ID列（索引0）
let currentColumn = 0;
const input = document.getElementById('myInput');
const searchButtons = document.querySelectorAll('.w3-bar .w3-button');
const table = document.getElementById('myTable');
const rows = table.querySelectorAll('tr:not(.header)'); // 排除表头行

// 核心搜索函数
function filterTable() {
  const filter = input.value.trim().toUpperCase();
  
  rows.forEach(row => {
    const td = row.querySelectorAll('td')[currentColumn];
    if (td) {
      const txtValue = td.textContent.trim().toUpperCase();
      // 空输入显示所有行，否则匹配内容（支持模糊搜索）
      row.style.display = filter === '' || txtValue.includes(filter) ? '' : 'none';
    }
  });
}

// 绑定按钮点击事件：切换搜索列
searchButtons.forEach(button => {
  button.addEventListener('click', () => {
    // 移除所有按钮的选中状态
    searchButtons.forEach(btn => btn.classList.remove('active'));
    // 标记当前按钮为选中状态
    button.classList.add('active');
    // 更新当前搜索列索引
    currentColumn = parseInt(button.dataset.column);
    // 更新输入框提示文字
    const columnName = button.textContent.trim();
    input.placeholder = `Search by ${columnName}...`;
    // 立即触发一次搜索
    filterTable();
  });
});

// 绑定输入框键盘事件
input.addEventListener('keyup', filterTable);
// 页面加载时初始化显示所有行
filterTable();

关键改动说明 #

• 给按钮添加数据属性：每个按钮新增data-column属性存储对应列的索引，摆脱硬编码，后续新增列只需添加对应按钮和属性即可。
• 跟踪当前选中列：用变量currentColumn保存当前搜索列的索引，点击按钮时同步更新，让搜索函数动态使用目标列。
• 按钮状态可视化：给选中的按钮添加active类（可自定义CSS强化视觉效果），让用户直观知道当前的搜索目标列。
• 优化搜索逻辑：
  • 改用querySelectorAll获取元素，返回静态节点列表，避免动态集合的性能问题。
  • 排除表头行，仅对数据行进行搜索，提升效率。
  • 用includes实现模糊搜索（如需严格匹配，替换为===即可），同时用trim()处理输入和单元格内容，避免空格干扰匹配结果。
• 事件绑定最佳实践：移除HTML内联的onkeyup事件，改用JavaScript添加事件监听器，实现HTML与JS代码分离，更易维护。
• 初始化处理：页面加载完成后自动触发一次搜索，确保初始状态下所有行正常显示。

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