如何实现通过搜索所有含class="x"的<td>内容过滤表格<tr>行

解决方案代码 #

// 监听过滤输入框的输入事件
$('#filter-input').on('input', function() {
  const filterVal = $(this).val().toLowerCase().trim();

  // 遍历表格主体内的每一行
  $('tbody tr').each(function() {
    // 收集当前行所有class="x"元素的文本，拼接成统一字符串
    const rowContent = $(this).find('.x').map(function() {
      return $(this).text().toLowerCase().trim();
    }).get().join(' ');

    // 根据匹配结果控制行的显示/隐藏
    if (filterVal === '' || rowContent.includes(filterVal)) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
});

关键修改点 #

• 放弃原来只取第一个.x元素的逻辑，改用.find('.x')选中当前行内所有带x类的元素
• 用.map()遍历所有目标元素，提取每个元素的文本内容并做标准化处理（转小写、去首尾空格）
• 将所有提取的文本拼接成一个完整字符串，再检查输入值是否存在于其中，确保只要任意一个.x元素内容匹配就显示整行
• 使用input事件替代keyup，能兼容粘贴、输入法联想等更多输入场景

实用提示 #

• 若表格有表头行，确保只遍历<tbody>内的行，避免表头被错误过滤
• 需要区分大小写匹配的话，删除代码中的.toLowerCase()即可
• 可根据实际HTML结构调整选择器（比如给表格加ID，用#your-table tbody tr更精准）

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