使用JavaScript筛选动态HTML表格时行全部隐藏的问题排查

核心问题1：列索引错误 #

你的JavaScript代码中错误地将Region列的索引写成了tableData[2]，但根据表格结构：

• 第0列：Date
• 第1列：Region
• 第2列：Forecast
• 第3列：Margin
  因此必须用tableData[1]来获取Region列的数据。

核心问题2：匹配鲁棒性不足 #

即使修正索引，也可能因为表格数据存在前后空格、大小写差异（如下拉框值为"North"，表格里是" North"或"NORTH"）导致匹配失败，需要增强文本处理逻辑消除这些干扰。

修改后的JavaScript代码 #

function filterTable() {
    var selectedOption = document.getElementById("regionFilter").value.trim().toLowerCase();
    var tableRows = document.getElementById("table").getElementsByTagName("tr");

    for (var i = 1; i < tableRows.length; i++) {
        var tableData = tableRows[i].getElementsByTagName("td");
        var hideRow = true;
        // 处理Region列文本：去前后空格、转小写，避免匹配误差
        var regionValue = tableData[1].innerHTML.trim().toLowerCase();

        if (selectedOption === "all") {
             hideRow = false;
        } else if (regionValue === selectedOption) {
            hideRow = false;
        }

        tableRows[i].style.display = hideRow ? "none" : "";
    }
}
document.getElementById("regionFilter").addEventListener("change", filterTable);

调试建议（可选） #

如果问题仍存在，可在循环内添加控制台打印，对比选中值与表格实际值：

console.log("选中值:", selectedOption);
console.log("表格Region值:", regionValue);

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