如何用JavaScript统计HTML表格可见行数（过滤代码统计失效排查）

你的代码存在两个核心问题：

1. tr[i].length是错误用法——单个<tr>元素不存在length属性，这不是统计行数的正确方式
2. 你在循环内部每次匹配到行就更新统计，最终只会显示最后一个匹配行的无效值，应该先统计完所有可见行的总数，再统一更新显示

修正后的代码如下：

function myFunction() {
    // Declare variables
    var input, filter, table, tr, td, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("MyTable");
    tr = table.getElementsByTagName("tr");
    // 初始化可见行数计数器
    let visibleCount = 0;

    // 遍历所有表格行，隐藏不匹配搜索条件的行
    for (i = 0; i < tr.length; i++) {
        td = tr[i].getElementsByTagName("td")[1]; // 切换数字可指定搜索的目标列
        if (td) {
            txtValue = td.textContent || td.innerText;
            if (txtValue.toUpperCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
                // 可见行计数器加1
                visibleCount++;
            } else {
                tr[i].style.display = "none";
            }
        }
    }
    // 遍历完成后，统一更新统计显示
    document.getElementById("statistic").innerHTML = visibleCount;
}

关键修改说明： #

• 新增visibleCount变量，专门用来累计可见行的数量
• 每次判定行需要显示时，给计数器加1
• 将统计更新代码移到循环外部，确保所有行遍历完成后，再把最终总数渲染到页面上

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