修改jQuery多条件筛选代码 使其仅作用于posts-table-1指定表格

失效核心原因 #

直接替换表格ID选择器不生效，本质是两个问题：

• 原代码用table > tbody > tr的严格直接子元素选择器，碰到动态渲染的表格（比如带分页、嵌套节点的插件表格），会因为tbody和tr之间存在其他包裹节点选不到目标行
• 原筛选逻辑靠整行文本按换行拆分匹配列内容，只要单元格内存在换行、多余空白字符，就会出现列索引错位，匹配完全失效

修改后可用代码 #

修改后代码仅对ID为posts-table-1的表格生效，同时修正了列匹配逻辑，兼容绝大多数动态渲染表格场景：

$(document).ready(function () {  
  // 如果表格是动态渲染生成，把下面一行换成 $(document).on('click', '.CalendarFilter', function () { 即可
  $('.CalendarFilter').click(function () {
    var filterValues = [];

    $('.filter').each(function () {
      var colIndex = $(this).data('col');
      $(this).find('option:selected').each(function () {
        if ($(this).val() !== "") {
          filterValues.push({
            text: $(this).text().trim(),
            colId: colIndex
          });
        }
      });
    });
    // 严格锁定目标表格，放宽层级匹配规则避免选不到行
    filter('#posts-table-1 tbody tr', filterValues);
  });

  function filter(rowSelector, filterConditions) {
    $(rowSelector).each(function () {
      var $currentRow = $(this);
      // 无筛选条件时默认展示所有行
      if (filterConditions.length === 0) {
        $currentRow.show();
        return;
      }

      var matchedCount = 0;
      $.each(filterConditions, function (_, cond) {
        // 直接按列索引取对应单元格文本，从根源解决列错位问题
        var $cell = $currentRow.find('td').eq(cond.colId);
        var cellContent = $cell.text().trim();
        if (cellContent.search(new RegExp("\\b" + cond.text + "\\b")) >= 0) {
          matchedCount++;
        }
      });

      // 所有筛选条件全部满足才展示当前行
      matchedCount === filterConditions.length ? $currentRow.show() : $currentRow.hide();
    });
  }
});

额外注意事项 #

• 如果你的筛选下拉框是和表格一起动态生成的，也可以把$('.filter')的选择器加上范围限定，避免和页面其他筛选控件冲突
• 如果表格数据是Ajax异步加载的，确保筛选逻辑在数据渲染完成后执行，或者用事件委托的方式绑定触发按钮的点击事件

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