如何使用JavaScript实现HTML表格每列独立过滤筛选功能

完全可以实现，你目前在用的jQuery DataTables本身就原生支持列级搜索能力，所有逻辑都可以写在$(document).ready范围内，不需要额外引入其他依赖，也不用给HTML加自定义特殊标签，不会出现之前调整表格格式导致的兼容性问题。

实现代码 #

只需要修改你的DataTables初始化逻辑即可，原有HTML结构不需要做任何调整：

$(document).ready(function() {
  // 复制表头行，用来放每列的搜索框
  $('#permits thead tr').clone(true).appendTo('#permits thead');
  // 给新复制的表头每列插入搜索框
  $('#permits thead tr:eq(1) th').each(function (index) {
    const columnName = $(this).text();
    $(this).html(`<input type="text" placeholder="搜索${columnName}" style="width:100%;box-sizing:border-box;">`);
    // 绑定搜索事件，仅作用于当前列
    $('input', this).on('keyup change', function () {
      if (dataTable.column(index).search() !== this.value) {
        dataTable.column(index).search(this.value).draw();
      }
    });
  });

  // 初始化表格
  const dataTable = $('#permits').DataTable({
    "pagingType": "full_numbers",
    "order": [[1, "asc"]],
    // 配置仅第一行表头支持排序，避免点击搜索框触发排序
    "orderCellsTop": true,
    // 可选配置：表头固定，滚动时搜索框不会消失
    "fixedHeader": true
  });
});

功能说明 #

• 所有逻辑都包裹在$(document).ready中，页面加载完成后自动生成每列搜索框，无需额外操作
• 搜索逻辑调用的是DataTables原生的列过滤方法，性能和兼容性都有保障，后续调整表格列顺序、修改列样式都不会影响搜索功能
• 支持多列同时搜索，多个搜索框的条件会叠加生效

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