如何在MVC视图及.cshtml表格中实现按列搜索？JS代码故障求助

我看你之前的代码里踩了个常见的小坑——给所有搜索输入框用了同一个id="SupInput"，ID在页面里必须是唯一的，这会导致JS没法正确区分不同列的输入。咱们一步步来修正和实现符合需求的按列搜索：

第一步：先把.cshtml里的表格结构理清楚 #

确保你的表格有明确的表头（thead）和内容区（tbody），比如这样：

<table id="example" class="table table-bordered">
    <thead>
        <tr>
            <th>供应商ID</th>
            <th>供应商名称</th>
            <th>联系人</th>
            <th>联系电话</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.SupplierId</td>
                <td>@item.SupplierName</td>
                <td>@item.ContactPerson</td>
                <td>@item.Phone</td>
            </tr>
        }
    </tbody>
</table>

第二步：编写正确的JavaScript搜索逻辑 #

修改你的JS代码，给每个输入框做唯一标识，同时绑定实时搜索的事件：

$(document).ready(function() {
    // 给每个表头单元格添加搜索输入框
    $('#example thead th').each(function(index) {
        var title = $(this).text();
        // 用列索引做标记，避免重复ID，同时用类名统一管理输入框
        $(this).html('<input type="text" class="form-control search-input" data-column="' + index + '" placeholder="搜索 ' + title + '"/>');
    });

    // 给所有搜索输入框绑定实时搜索事件
    $('.search-input').on('keyup', function() {
        // 获取当前输入框对应的列索引和搜索值
        var targetColumn = $(this).data('column');
        var filterText = $(this).val().toLowerCase();
        
        // 遍历表格行，筛选对应列的内容
        $('#example tbody tr').each(function() {
            var cellContent = $(this).find('td').eq(targetColumn).text().toLowerCase();
            // 匹配就显示，不匹配就隐藏
            $(this).toggle(cellContent.includes(filterText));
        });
    });
});

关键修正点说明 #

• 去掉重复ID：改用class="search-input"加上data-column属性标记列索引，这样能精准定位每个输入框对应的列，不会出现ID冲突的问题。
• 实时搜索触发：绑定keyup事件，用户输入时立刻执行筛选，不用额外点击按钮。
• 大小写不敏感：把输入值和单元格文本都转成小写，确保搜索结果不受大小写影响。
• 精准列匹配：用data-column存储的索引找到对应列的单元格，就算表头文本修改，搜索逻辑也不会出错。

额外优化建议 #

如果你的表格数据量比较大，可以加个防抖函数减少DOM操作频率，提升页面性能：

// 防抖函数：用户停止输入300毫秒后再执行搜索
function debounce(func, delay = 300) {
    let timeoutId;
    return function() {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => func.apply(this, arguments), delay);
    };
}

// 绑定事件时用防抖包裹
$('.search-input').on('keyup', debounce(function() {
    var targetColumn = $(this).data('column');
    var filterText = $(this).val().toLowerCase();
    
    $('#example tbody tr').each(function() {
        var cellContent = $(this).find('td').eq(targetColumn).text().toLowerCase();
        $(this).toggle(cellContent.includes(filterText));
    });
}));

要是你用了jQuery DataTables插件，其实它自带列搜索功能，开启配置就能用，更省心：

$(document).ready(function() {
    $('#example').DataTable({
        initComplete: function() {
            this.api().columns().every(function() {
                var column = this;
                $('<input type="text" class="form-control" placeholder="搜索"/>')
                    .appendTo($(column.header()))
                    .on('keyup', function() {
                        column.search($(this).val()).draw();
                    });
            });
        }
    });
});

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