基于JavaScript实现表格多列独立筛选功能的技术问询

嘿，我帮你把代码补全并整理成了完整的多列独立筛选方案，直接就能用！下面是完整的实现代码和使用说明：

完整JavaScript实现 #

这段代码基于你给出的片段完善了核心筛选逻辑，还添加了初始化方法，能自动绑定所有筛选框的输入事件：

(function (document) {
  'use strict';

  var MyTableFilter = (function (Arr) {
    var _input;

    // 核心筛选逻辑：根据当前输入框的值过滤对应列的内容
    function _onInputEvent(e) {
      _input = e.target;
      // 获取关联的表格类名和目标列索引
      var tableClass = _input.getAttribute('data-table');
      var columnIndex = parseInt(_input.getAttribute('data-column'));
      var filterValue = _input.value.toLowerCase();

      // 遍历所有关联的表格
      var tables = document.getElementsByClassName(tableClass);
      Arr.forEach.call(tables, function (table) {
        // 遍历表格tbody里的每一行
        Arr.forEach.call(table.tBodies, function (tbody) {
          Arr.forEach.call(tbody.rows, function (row) {
            // 获取当前行对应列的文本内容
            var cellText = row.cells[columnIndex].textContent.toLowerCase();
            // 根据匹配结果显示/隐藏行
            row.style.display = cellText.includes(filterValue) ? '' : 'none';
          });
        });
      });
    }

    // 初始化：给所有筛选框绑定输入事件
    function init() {
      var filterInputs = document.querySelectorAll('input[data-table][data-column]');
      Arr.forEach.call(filterInputs, function (input) {
        input.addEventListener('input', _onInputEvent);
      });
    }

    return {
      init: init
    };
  })(Array.prototype);

  // 页面加载完成后自动初始化筛选器
  document.addEventListener('DOMContentLoaded', function () {
    MyTableFilter.init();
  });
})(document);

HTML结构示例 #

按照下面的结构来写你的表格和筛选框，确保筛选框的data-table和表格的类名一致，data-column对应列的索引（从0开始）：

<!-- 筛选栏：每列对应一个筛选框 -->
<div class="table-filters">
  <input type="text" data-table="my-data-table" data-column="0" placeholder="筛选姓名">
  <input type="text" data-table="my-data-table" data-column="1" placeholder="筛选部门">
  <input type="text" data-table="my-data-table" data-column="2" placeholder="筛选职位">
</div>

<!-- 目标表格 -->
<table class="my-data-table" border="1">
  <thead>
    <tr>
      <th>姓名</th>
      <th>部门</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>技术部</td>
      <td>前端工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>市场部</td>
      <td>运营专员</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>技术部</td>
      <td>后端工程师</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>人事部</td>
      <td>招聘专员</td>
    </tr>
  </tbody>
</table>

关键细节说明 #

• 关联规则：筛选框通过data-table属性绑定到表格的类名，确保筛选器只会作用于指定的表格，支持多表格同时使用
• 列定位：data-column属性指定要筛选的列索引（从0开始计数），比如第一列就是0
• 匹配逻辑：当前是不区分大小写的模糊匹配，如果需要精确匹配，把includes改成===即可
• 自动初始化：页面加载完成后会自动绑定所有筛选框的事件，无需手动调用

实用扩展建议 #

如果你的表格数据量比较大，或者需要更流畅的体验，可以加个防抖优化：

// 防抖函数：减少频繁输入时的筛选触发次数
function debounce(func, delay = 300) {
  let timeoutId;
  return function(...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

// 修改绑定事件的代码，把_onInputEvent包一层防抖
input.addEventListener('input', debounce(_onInputEvent));

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