Django+Postgres环境下通过选择列、条件和值实时筛选表格的JS实现求助

你提供的这段JS代码无法实现需求，核心问题如下：

• ID与触发逻辑不匹配：你的搜索输入框id为search-text，绑定的触发函数是tableSearch()，但提供的代码函数名为myFunction，且获取的输入框id是myInput，完全无法对应，既触发不了逻辑也拿不到输入值
• 逻辑硬编码：现有代码仅固定判断表格第1、2列是否包含搜索值，完全没有读取你选择的「筛选列」「筛选条件」参数，不支持自定义字段、大于/小于/等于等判断逻辑
• 存在语法错误：tr是所有表格行的集合，不能直接调用getElementsByTagName('td')获取单元格，运行会直接报错

前端实时筛选实现方案（适合数据量小、一次性加载完所有表格数据的场景） #

直接替换你的JS代码为以下内容即可，适配你现有表单结构：

function tableSearch() {
    // 读取用户选择的筛选参数
    const selectedColumn = document.querySelector('select[name="column"]').value;
    const selectedCondition = document.querySelector('select[name="condition"]').value;
    const inputVal = document.getElementById('search-text').value.trim();
    // 这里请将myTable替换为你实际表格的id
    const table = document.getElementById('myTable');
    const trs = table.getElementsByTagName('tr');

    // 未补全筛选参数/输入为空时显示所有行
    if (!selectedColumn || !selectedCondition || inputVal === '') {
        for (let i = 0; i < trs.length; i++) {
            trs[i].style.display = '';
        }
        return;
    }

    // 列名与表格列索引的映射，按你实际表格列顺序调整，索引从0开始计数
    const columnIndexMap = {
        'title': 0,
        'quantity': 1,
        'distance': 2
    };
    const targetColIndex = columnIndexMap[selectedColumn];

    // 逐行判断是否符合筛选条件
    for (let i = 1; i < trs.length; i++) { // i从1开始跳过表头行
        const td = trs[i].getElementsByTagName('td')[targetColIndex];
        if (!td) continue;
        const cellVal = td.textContent.trim();
        let isMatch = false;

        switch(selectedCondition) {
            case 'contains':
                isMatch = cellVal.toUpperCase().includes(inputVal.toUpperCase());
                break;
            case 'equals':
                isMatch = cellVal.toUpperCase() === inputVal.toUpperCase();
                break;
            case 'greater':
                isMatch = Number(cellVal) > Number(inputVal);
                break;
            case 'lower':
                isMatch = Number(cellVal) < Number(inputVal);
                break;
        }

        trs[i].style.display = isMatch ? '' : 'none';
    }
}

后端筛选实现方案（适合数据量大、需要调用Postgres查询的场景） #

在你的Django视图中添加如下筛选逻辑，点击Apply按钮提交表单后即可从数据库层面筛选数据：

from django.db.models import Q
from .models import YourTableModel # 替换为你表格对应的模型名

def your_table_view(request):
    data_queryset = YourTableModel.objects.all()
    # 获取前端提交的筛选参数
    column = request.GET.get('column')
    condition = request.GET.get('condition')
    search_val = request.GET.get('search-text')

    if column and condition and search_val:
        # 筛选条件与Django ORM查询后缀的映射
        condition_map = {
            'contains': '__icontains',
            'equals': '__exact',
            'greater': '__gt',
            'lower': '__lt'
        }
        filter_params = {f"{column}{condition_map[condition]}": search_val}
        data_queryset = data_queryset.filter(**filter_params)
    
    return render(request, 'your_template.html', {'table_data': data_queryset})

如果需要后端筛选也能实时生效不刷新页面，可以引入HTMX工具，不需要写额外JS代码即可实现异步请求更新表格。

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