修改jQuery下拉过滤HTML表格代码 改为点击搜索按钮触发过滤

改造核心思路 #

原代码的核心列匹配过滤逻辑完全不需要修改，只需要调整触发逻辑：

• 移除原绑定在下拉选.filter上的change实时监听
• 将「遍历下拉收集选中筛选值」的逻辑抽离为独立方法
• 给搜索按钮绑定点击事件，点击时才执行值收集+表格过滤操作

第一步：新增搜索按钮 #

在筛选下拉的同区域添加触发搜索的按钮，示例HTML：

<!-- 你的原有.filter下拉框保持不变，在旁边加按钮即可 -->
<button id="doFilterBtn">搜索</button>
<!-- 可选：增加重置按钮，一键清空筛选显示全部数据 -->
<button id="resetFilterBtn">重置</button>

第二步：改造后的JS代码 #

核心过滤逻辑和原代码完全一致，仅调整触发方式：

$(document).ready(function () {
    // 抽离：收集所有下拉选中的筛选值
    function getSelectedFilterValues() {
        var values = [];
        $('.filter').each(function () {
            var colIdx = $(this).data('col');
            $(this).find('option:selected').each(function () {
                if ($(this).val() != "") values.push({
                    text: $(this).text(),
                    colId: colIdx
                });
            });
        });
        return values;
    }

    // 原有核心过滤逻辑完全保留，无修改
    function filter(selector, values) {
        $(selector).each(function () {
            var sel = $(this);
            var tokens = sel.text().trim().split('\n');
            var toknesObj = [], i;
            for(i=0;i<tokens.length;i++){
                toknesObj[i] = {
                   text:tokens[i].trim(), 
                   found:false
                };
            }

            var show = false;
            $.each(values, function (i, val) {                
                if (toknesObj[val.colId].text.search(new RegExp("\\b"+val.text+"\\b")) >= 0) {
                   toknesObj[val.colId].found = true;
                }
            });          
            
            var count = 0;
            $.each(toknesObj, function (i, val) {
                if (val.found){
                    count+=1;
                }
            });
            show = (count === values.length);        
            show ? sel.show() : sel.hide();
        });
    }

    // 绑定搜索按钮点击事件：点击才执行过滤
    $('#doFilterBtn').on('click', function() {
        var filterValues = getSelectedFilterValues();
        filter('table > tbody > tr', filterValues);
    });

    // 可选：重置按钮逻辑
    $('#resetFilterBtn').on('click', function() {
        // 清空所有下拉选的选中状态
        $('.filter').val('');
        // 显示所有表格行
        $('table > tbody > tr').show();
    })
});

改造点说明 #

• 原代码下拉选值后立即过滤的交互已经完全移除，现在只有点击搜索按钮才会执行过滤
• 原有的多列同时匹配、整词匹配的核心过滤规则100%保留，没有改动
• 如果需要支持回车触发搜索，可以额外给下拉框绑定keyup事件，判断按下回车时调用和搜索按钮一样的过滤逻辑即可

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