如何用jQuery的.indexOf()实现按Office与Month双参数筛选表格？

问题分析 #

你的代码存在两个核心问题：

• 两次调用toggle()导致显示状态逻辑混乱：第一次切换包含Office的行的显示状态，第二次又对这些行再次切换，不符合"同时满足两个条件才显示"的需求。
• 使用整行文本的indexOf()匹配不够精准：如果行内其他字段（比如Name）包含筛选关键词，会出现误匹配。

修正方案 #

以下两种方式都可以实现精准的双重筛选：

方式1：遍历每行并判断显示状态

let office = "1a";
let mth = "Jan";
$("#Table2 tbody tr").each(function() {
  // 精准获取当前行的Office和Month列内容
  const rowOffice = $(this).find('td').eq(0).text().trim();
  const rowMonth = $(this).find('td').eq(2).text().trim();
  // 同时满足两个条件则显示，否则隐藏
  $(this).toggle(rowOffice === office && rowMonth === mth);
});

方式2：先隐藏所有行，再显示符合条件的行

let office = "1a";
let mth = "Jan";
// 先隐藏所有数据行
$("#Table2 tbody tr").hide();
// 筛选符合双条件的行并显示
$("#Table2 tbody tr").filter(function() {
  const rowOffice = $(this).find('td').eq(0).text().trim();
  const rowMonth = $(this).find('td').eq(2).text().trim();
  return rowOffice === office && rowMonth === mth;
}).show();

关键优化点 #

• 精准列定位：用eq(index)获取对应列（Office是第1列，索引为0；Month是第3列，索引为2），避免整行文本匹配的误判。
• 严格相等判断：用===替代indexOf()，确保只有完全匹配的行才会被选中。
• 清晰的状态控制：要么通过toggle()一次性判断双条件，要么先统一隐藏再显示符合条件的行，避免状态切换混乱。

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