如何修复基于姓名数组和指定月份的jQuery表格过滤代码？

核心思路 #

需同时满足两个过滤条件：

• 表格行的姓名列值存在于目标姓名数组中
• 表格行的月份列值等于指定月份（如Feb）

正确代码实现 #

先给出示例表格结构（请根据你的实际结构调整列索引）：

<table id="dataTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>月份</th>
      <th>其他数据</th>
    </tr>
  </thead>
  <tbody>
    <tr><td>Abe D</td><td>Feb</td><td>数据1</td></tr>
    <tr><td>Jon R</td><td>Feb</td><td>数据2</td></tr>
    <tr><td>Alice S</td><td>Feb</td><td>数据3</td></tr>
    <tr><td>Abe D</td><td>Jan</td><td>数据4</td></tr>
  </tbody>
</table>

对应的jQuery过滤代码：

// 定义目标过滤条件
const targetNames = ['Abe D', 'Jon R'];
const targetMonth = 'Feb';

// 遍历表格行执行过滤
$('#dataTable tbody tr').each(function() {
  // 获取当前行的姓名和月份文本（注意去除前后空格）
  const rowName = $(this).find('td:eq(0)').text().trim();
  const rowMonth = $(this).find('td:eq(1)').text().trim();
  
  // 同时满足两个条件则显示，否则隐藏
  const shouldShow = targetNames.includes(rowName) && rowMonth === targetMonth;
  $(this).toggle(shouldShow);
});

关键注意事项 #

• 条件逻辑：必须用&&同时匹配姓名和月份，若误用||会导致不符合预期的行被显示
• 文本处理：用.trim()去除文本前后空格，避免因空格导致匹配失败
• 列索引适配：td:eq(0)对应姓名列，td:eq(1)对应月份列，请根据你的实际表格结构调整索引值
• 兼容旧浏览器：如果需要兼容ES6之前的浏览器，可将targetNames.includes(rowName)替换为jQuery方法$.inArray(rowName, targetNames) !== -1

执行后预期效果 #

表格仅显示以下两行：

• 姓名为Abe D且月份为Feb的行
• 姓名为Jon R且月份为Feb的行

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