如何让表格搜索结果始终显示列名？JS搜索功能问题求助

你的核心问题是搜索逻辑误将表头行（包含<th>的<tr>）纳入了隐藏判断，导致表头被隐藏。以下是两种直接的修复方案，同时说明你之前尝试的showCols函数为何会导致布局混乱。

方案1：直接跳过表头行（最简单） #

因为你的表头是表格的第一行，只需修改循环起始索引，跳过第一行的隐藏判断，同时强制表头始终显示：

function searchTable() {
  var input, filter, found, table, tr, td, i, j;
  input = document.getElementById("search-input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table-sort");
  tr = table.getElementsByTagName("tr");
  
  // 强制表头始终显示
  tr[0].style.display = "";
  
  // 从第1行开始遍历（跳过表头）
  for (let i = 1; i < tr.length; i++) {
    found = false;
    td = tr[i].getElementsByTagName("td");
    
    for (let j = 0; j < td.length; j++) {
      if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        found = true;
        break; // 找到匹配项就终止内层循环，提升性能
      }
    }
    
    tr[i].style.display = found ? "" : "none";
  }
}

方案2：通过元素类型判断表头（更灵活） #

如果未来表头位置可能变化，可通过判断行内是否包含<th>元素来识别表头，确保所有表头行都不会被隐藏：

function searchTable() {
  var input, filter, found, table, tr, td, i, j;
  input = document.getElementById("search-input");
  filter = input.value.toUpperCase();
  table = document.getElementById("table-sort");
  tr = table.getElementsByTagName("tr");
  
  for (let i = 0; i < tr.length; i++) {
    // 判断当前行是否为表头
    const isHeaderRow = tr[i].getElementsByTagName("th").length > 0;
    if (isHeaderRow) {
      tr[i].style.display = ""; // 表头始终显示
      continue; // 跳过当前行的搜索判断
    }
    
    found = false;
    td = tr[i].getElementsByTagName("td");
    
    for (let j = 0; j < td.length; j++) {
      if (td[j].innerHTML.toUpperCase().indexOf(filter) > -1) {
        found = true;
        break;
      }
    }
    
    tr[i].style.display = found ? "" : "none";
  }
}

为什么showCols函数会导致布局混乱？ #

你之前的showCols将表格行的display设为block，但表格行默认的display值是table-row，这个值是表格布局的核心——它会让行和列自动对齐。改成block后，行变成普通块级元素，不再遵循表格的列宽规则，自然会出现布局错位、多余列的问题。

实际上完全不需要这个函数，只要修改searchTable函数确保表头不被隐藏即可。

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