jQuery过滤表格数据时表头消失如何解决？基于HTML+JavaScript实现

• 表头消失：你当前的过滤逻辑遍历了整个表格的所有<tr>元素，包含<thead>里的表头行。第一行表头的单元格是<th>而非<td>，执行$row.find("td:first").text()会得到空字符串，只要输入的搜索内容不为空，就会匹配失败触发隐藏，导致表头被隐藏。
• 搜索框消失：当你把判断条件改为if(index !== 0)后，<thead>里的第二行（带搜索框的行，对应index=1）会被纳入过滤逻辑，这一行的单元格同样是<th>，获取到的文本为空，匹配失败后就会被隐藏，导致搜索框消失。

直接调整过滤的元素范围，只遍历<tbody>内的数据行，从根源上避免操作表头和搜索框行，不需要再通过index判断排除元素，修复后的JS代码如下：

$("#btn10").click(function() {
    $(".search-boxes").toggle()
});

$("#comfilter").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    // 仅选中tbody内的数据行，不会操作thead的内容
    $("#communication_mode_table tbody tr").each(function() {
        const $row = $(this);
        const rowText = $row.find("td:first").text().toLowerCase();
        $row.toggle(rowText.indexOf(value) !== -1);
    });
});

• 防抖优化：针对输入搜索场景，可添加300ms防抖逻辑，减少输入过程中过滤函数的触发次数，提升页面流畅度。
• 多列匹配：如果需要支持所有列内容的搜索，可将当前行所有<td>的文本拼接后再进行匹配，不需要限定只取第一列内容。
• 无依赖实现：如果项目不需要依赖jQuery，可使用原生DOM API完成相同功能：

document.querySelector('#comfilter').addEventListener('keyup', function(e) {
  const value = e.target.value.toLowerCase();
  document.querySelectorAll('#communication_mode_table tbody tr').forEach(row => {
    const text = row.querySelector('td:first-child').textContent.toLowerCase();
    row.style.display = text.includes(value) ? '' : 'none';
  });
});

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