如何实现HTML表格多列自定义筛选（含All/None选项）

我想要实现类似Excel的筛选功能，提供All和None两个选项：

• None：隐藏对应列单元格为空/空白（包括空字符串、-、换行）的行
• All：隐藏对应列单元格非空/非空白的行

先后尝试两种方法均失败：

1. 第一种方法移除筛选时会影响无关列
2. 第二种通过哈希表存储各列选项状态，但代码无法正常工作，原代码如下：

function filter_rows(index, parentID) {
    let rows = tableid.rows;
    let options = document.getElementById(parentID).getElementsByTagName('label')
    let checkboxes = document.getElementById(parentID).getElementsByTagName('input')
    for (let i = 0; i < options.length; i++) {
        if (checkboxes[i].checked) {
            if (!hashmapOfoptions[index].includes(options[i].innerText)) {
                hashmapOfoptions[index].push(options[i].innerText)
            }
        } else {
            hashmapOfoptions[index] = hashmapOfoptions[index].filter(item => item !== options[i].innerText)
        }
    }

    for (let row = 1; row < rows.length; row++) {
        let cols = rows[row].cells;
        willHideRow = false
        for (let j = 0; j < cols.length; j++) {
            if (!hashmapOfoptions[j].includes("None")) {
                if (cols[j].innerText == "" || cols[j].innerText == "-" || cols[j].innerText == "\n") {
                    willHideRow = true
                }
            }
            if (!hashmapOfoptions[j].includes("All")) {
                if (cols[j].innerText != "" || cols[j].innerText != "-" || cols[j].innerText != "\n") {
                    willHideRow = true
                }
            }
        }
        if (willHideRow) {
            rows[row].style.display = 'none'
        } else {
            rows[row].style.display = ''
        }
    }
}

修复方案 #

关键修复点 #

1. 修正筛选逻辑判断：
   • 当列选中None时，判断单元格为空则隐藏该行
   • 当列选中All时，判断单元格非空则隐藏该行
   • 空值判断用||（满足任一空值类型即判定为空），非空判断用&&（同时不满足所有空值类型才判定为非空）
2. 声明局部变量：给willHideRow添加let声明，避免全局变量污染
3. 优化哈希表状态维护：确保每列的筛选选项数组正确更新，无重复或遗漏
4. 添加性能优化：只要某一列触发隐藏条件，直接停止检查当前行的其他列

修复后的完整代码 #

// 提前初始化hashmapOfoptions：表格有N列就初始化N个空数组，例：const hashmapOfoptions = [[], [], []];
function filter_rows(index, parentID) {
    let rows = tableid.rows;
    let options = document.getElementById(parentID).getElementsByTagName('label');
    let checkboxes = document.getElementById(parentID).getElementsByTagName('input');

    // 更新当前列的筛选状态
    for (let i = 0; i < options.length; i++) {
        const optionText = options[i].innerText;
        if (checkboxes[i].checked) {
            if (!hashmapOfoptions[index].includes(optionText)) {
                hashmapOfoptions[index].push(optionText);
            }
        } else {
            hashmapOfoptions[index] = hashmapOfoptions[index].filter(item => item !== optionText);
        }
    }

    // 遍历所有行应用筛选
    for (let row = 1; row < rows.length; row++) {
        let cols = rows[row].cells;
        let willHideRow = false;

        for (let j = 0; j < cols.length; j++) {
            const cellText = cols[j].innerText.trim();
            const isEmpty = cellText === "" || cellText === "-";

            // 处理None选项：选中None时，空单元格的行隐藏
            if (hashmapOfoptions[j].includes("None")) {
                if (isEmpty) {
                    willHideRow = true;
                    break;
                }
            }

            // 处理All选项：选中All时，非空单元格的行隐藏
            if (hashmapOfoptions[j].includes("All")) {
                if (!isEmpty) {
                    willHideRow = true;
                    break;
                }
            }
        }

        rows[row].style.display = willHideRow ? 'none' : '';
    }
}

额外说明 #

• 初始化hashmapOfoptions时，需与表格列数对应，确保每列有独立的筛选状态数组
• 新增trim()处理单元格文本：避免换行、首尾空格导致的空值判断错误
• 多列筛选逻辑：只要任意一列的筛选条件触发隐藏，该行就会被隐藏，符合多条件叠加筛选的预期

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