jQuery实现支持AND/OR逻辑的datepicker与下拉框组合表格筛选

该需求完全可以通过jQuery实现，无需依赖重型前端框架，在你已实现的单条件（datepicker日期、下拉选择）筛选能力基础上，仅需少量改造即可落地逻辑切换功能。

核心实现原理 #

• 新增逻辑切换的交互控件（可使用单选按钮组、下拉选择实现），标识当前生效的逻辑运算符为AND/OR
• 将原有单条件筛选的匹配逻辑抽成独立的判断方法，对每一行表格分别计算每个筛选条件的命中状态
• 根据当前选中的逻辑运算符做布尔值合并：AND逻辑要求所有条件同时命中才展示行，OR逻辑要求任意条件命中即展示行
• 根据合并后的结果批量控制表格行的显示/隐藏，不改动原有单条件的匹配判断规则

可直接复用的实现代码 #

页面结构示例 #

<!-- 筛选操作区 -->
<div class="filter-wrapper">
  <!-- 原有日期选择器 -->
  <input type="text" id="datePickerFilter" placeholder="选择筛选日期">
  <!-- 原有下拉选择框 -->
  <select id="selectFilter">
    <option value="">全部选项</option>
    <option value="type1">类型一</option>
    <option value="type2">类型二</option>
  </select>
  <!-- 新增逻辑切换控件 -->
  <div class="logic-group">
    <label>
      <input type="radio" name="filterLogic" value="AND" checked>
      AND （同时满足所有条件）
    </label>
    <label>
      <input type="radio" name="filterLogic" value="OR">
      OR （满足任意一个条件）
    </label>
  </div>
</div>

<!-- 目标数据表格 -->
<table id="targetTable">
  <thead>
    <tr>
      <th>日期</th>
      <th>类型</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>2024-06-01</td>
      <td>type1</td>
      <td>测试数据1</td>
    </tr>
    <tr>
      <td>2024-06-02</td>
      <td>type2</td>
      <td>测试数据2</td>
    </tr>
  </tbody>
</table>

jQuery核心逻辑 #

$(document).ready(function() {
  // 替换为你项目中原有的datepicker初始化逻辑
  $("#datePickerFilter").datepicker({ dateFormat: "yy-mm-dd" });

  // 抽离独立的单条件判断方法
  function checkDateMatch(rowElement) {
    const selectedDate = $("#datePickerFilter").val().trim();
    // 未选择日期时，该条件默认判定为命中，避免空筛选导致全表隐藏
    if (!selectedDate) return true;
    const rowDate = $(rowElement).find("td").eq(0).text().trim();
    return rowDate === selectedDate;
  }

  function checkSelectMatch(rowElement) {
    const selectedValue = $("#selectFilter").val().trim();
    // 未选择下拉选项时，该条件默认判定为命中
    if (!selectedValue) return true;
    const rowValue = $(rowElement).find("td").eq(1).text().trim();
    return rowValue === selectedValue;
  }

  // 统一执行筛选的核心方法
  function applyTableFilter() {
    const currentLogic = $("input[name='filterLogic']:checked").val();
    $("#targetTable tbody tr").each(function() {
      const row = this;
      // 分别获取每个条件的命中状态
      const isDateHit = checkDateMatch(row);
      const isSelectHit = checkSelectMatch(row);
      
      let rowVisible = false;
      if (currentLogic === "AND") {
        // AND逻辑：所有条件同时命中才展示
        rowVisible = isDateHit && isSelectHit;
      } else if (currentLogic === "OR") {
        // OR逻辑：任意条件命中即展示
        rowVisible = isDateHit || isSelectHit;
      }
      // 切换行的显示状态
      $(row).toggle(rowVisible);
    })
  }

  // 绑定所有筛选控件的触发事件，替换原有单条件筛选的绑定逻辑
  $("#datePickerFilter, #selectFilter, input[name='filterLogic']").on("change input", applyTableFilter);
})

落地注意事项 #

• 必须处理空筛选值的默认逻辑：当用户仅设置了一个筛选条件时，不能因为另一个条件未设置就判定为不匹配，需要将未激活的筛选条件默认标记为命中，这是实现中最容易出现的逻辑bug点
• 后续如果新增更多筛选条件（比如关键词输入框、多选下拉），仅需要按照相同模式新增独立的单条件判断方法，在核心逻辑里追加对应的布尔判断即可，无需重构切换逻辑
• 逻辑切换控件的变化事件需要绑定到核心筛选方法上，避免用户切换AND/OR后表格展示不更新

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