如何合并重复的JS表格筛选函数 实现输入框对应筛选关联表格

通用函数失效原因排查 #

• 选择器不匹配：你现有HTML中表格的类是sort不是sortierbar，输入框也没有添加gpvInput类，querySelectorAll无法匹配到对应元素，函数自然没有执行效果
• 索引使用错误：内层循环遍历表格行使用的变量是j，但你设置行显示状态时调用的是tr[i]，i是外层遍历表格的索引，会导致操作的行完全不符合预期
• 列索引错误：你需要筛选的X列是每行的第一个单元格，应该取索引为0的td，你写的td[1]取的是第二列Y列的数据，筛选逻辑自然不匹配需求
• 全局筛选逻辑不符合要求：你现有通用函数的写法是每次触发就遍历所有输入框和表格批量筛选，不符合「只筛选当前输入框对应表格、其他表格保持不变」的需求

修正后的实现方案 #

方案1：依赖现有ID命名规则，最小改动

无需修改现有HTML结构，仅需要把输入框的onkeyup属性调整为传入事件对象：

<!-- 把原来的onkeyup="xFilter()"修改为onkeyup="xFilter(event)"，两个输入框都要改 -->
<input type="text" id="X1" onkeyup="xFilter(event)"/>
<input type="text" id="X2" onkeyup="xFilter(event)"/>

对应的通用JS函数如下：

function xFilter(e) {
  // 获取当前触发输入的输入框元素
  const currentInput = e.target;
  // 从输入框ID提取序号，匹配对应表格ID
  const index = currentInput.id.replace('X', '');
  const targetTable = document.getElementById(`table${index}`);
  const filter = currentInput.value.toUpperCase();
  const trList = targetTable.getElementsByTagName('tr');

  for (let i = 0; i < trList.length; i++) {
    const firstTd = trList[i].getElementsByTagName('td')[0];
    if (firstTd) {
      const txtValue = firstTd.textContent || firstTd.innerText;
      trList[i].style.display = txtValue.toUpperCase().includes(filter) ? '' : 'none';
    }
  }
}

方案2：自定义属性绑定，适配不规则ID场景

如果后续输入框和表格ID没有统一命名规则，可以用自定义属性绑定对应关系，灵活性更高：
修改HTML，给每个输入框增加data-target-table属性指定对应表格的ID：

<input type="text" data-target-table="table1" onkeyup="xFilter(event)"/>
<table id="table1" class="sort">
  <!-- 原有表格内容不变 -->
</table>

<input type="text" data-target-table="table2" onkeyup="xFilter(event)"/>
<table id="table2" class="sort">
  <!-- 原有表格内容不变 -->
</table>

对应的JS函数如下，后续新增任意组输入框+表格，只需要加对data-target-table属性即可，不需要修改JS代码：

function xFilter(e) {
  const currentInput = e.target;
  // 从自定义属性直接读取对应表格ID
  const targetTableId = currentInput.dataset.targetTable;
  const targetTable = document.getElementById(targetTableId);
  const filter = currentInput.value.toUpperCase();
  const trList = targetTable.getElementsByTagName('tr');

  for (let i = 0; i < trList.length; i++) {
    const firstTd = trList[i].getElementsByTagName('td')[0];
    if (firstTd) {
      const txtValue = firstTd.textContent || firstTd.innerText;
      trList[i].style.display = txtValue.toUpperCase().includes(filter) ? '' : 'none';
    }
  }
}

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