基于jQuery实现表格多条件实时筛选（无需DataTables类插件）

当然可以！完全不需要依赖DataTables这类插件，咱们用纯jQuery就能搞定文本输入+下拉选择的组合实时筛选功能。下面我给你详细的实现步骤和代码示例，适配你提供的表格结构。

第一步：完善筛选控件的HTML结构 #

首先，你需要在表格外添加筛选用的输入框和下拉框（如果还没加的话）：

<!-- 筛选控件 -->
<div class="filter-controls">
  <input type="text" id="nameFilter" placeholder="输入姓名关键词（支持模糊匹配）">
  <select id="freelanceFilter">
    <option value="">全部职业状态</option>
    <option value="yes">自由职业者</option>
    <option value="no">非自由职业者</option>
  </select>
</div>

<!-- 你的表格 -->
<table id="testTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>职业状态</th>
      <!-- 其他列 -->
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>yes</td>
      <!-- 其他单元格内容 -->
    </tr>
    <tr>
      <td>Bob</td>
      <td>no</td>
      <!-- 其他单元格内容 -->
    </tr>
    <!-- 更多数据行 -->
  </tbody>
</table>

第二步：编写jQuery筛选逻辑 #

核心思路是监听筛选控件的变化，遍历表格行并检查是否同时满足两个筛选条件，代码如下：

$(document).ready(function() {
  // 给筛选控件绑定触发事件：输入框实时监听input，下拉框监听change
  $('#nameFilter').on('input', filterTable);
  $('#freelanceFilter').on('change', filterTable);

  // 核心筛选函数
  function filterTable() {
    // 获取当前筛选值，统一转小写实现不区分大小写的匹配
    const nameKeyword = $('#nameFilter').val().toLowerCase().trim();
    const freelanceStatus = $('#freelanceFilter').val().toLowerCase();

    // 遍历表格tbody中的每一行
    $('#testTable tbody tr').each(function() {
      // 获取当前行的姓名和职业状态文本（注意：这里的列索引要和你的表格结构对应！）
      // 比如姓名是第一列就用eq(0)，职业状态是第二列用eq(1)，以此类推
      const rowName = $(this).find('td:eq(0)').text().toLowerCase().trim();
      const rowFreelance = $(this).find('td:eq(1)').text().toLowerCase().trim();

      // 分别判断两个条件：空值时忽略该条件
      let isNameMatch = true;
      if (nameKeyword) {
        isNameMatch = rowName.includes(nameKeyword);
      }

      let isFreelanceMatch = true;
      if (freelanceStatus) {
        isFreelanceMatch = rowFreelance === freelanceStatus;
      }

      // 只有两个条件都满足时显示行，否则隐藏
      $(this).toggle(isNameMatch && isFreelanceMatch);
    });
  }

  // 页面加载完成后执行一次初始筛选（如果有默认筛选值的话）
  filterTable();
});

关键细节说明 #

• 列索引调整：代码里的td:eq(0)和td:eq(1)是列的索引（从0开始），你需要根据自己表格中“姓名”和“职业状态”列的实际位置修改这个数字。
• 不区分大小写：把所有文本转成小写，避免用户输入大写字母时匹配不到结果，提升用户体验。
• 空值兼容：当输入框为空或下拉框选“全部”时，对应的筛选条件会自动失效，只按另一个条件筛选。

可选优化：添加防抖函数（适合大数据表格） #

如果你的表格有很多行（比如几百上千行），频繁输入时会频繁触发筛选，可能有点卡顿。可以加个防抖函数，延迟执行筛选：

// 防抖工具函数：延迟执行传入的函数，避免频繁触发
function debounce(func, delay = 300) {
  let timeoutId;
  return function() {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(func, delay);
  };
}

// 绑定输入框事件时用防抖后的函数
$('#nameFilter').on('input', debounce(filterTable));

这样用户输入时，会在停止输入300毫秒后才执行筛选，减少性能消耗。

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