HTML表格搜索后统计可见行中特定单词出现次数的技术问题

你当前的问题出在jQuery选择器写法错误，$('table tr:contains(Create) tr:visible')是无效的——因为<tr>标签内部不会嵌套另一个<tr>，这个选择器无法匹配到任何元素。

正确的选择器写法 #

要同时满足包含指定文本和可见两个条件，需要把两个筛选器写在同一个元素选择器上：

var Create = $('table tr:contains(Create):visible').length;

如果页面存在多个表格，建议加上表格ID精准定位，避免统计错误：

var Create = $('#table1 tr:contains(Create):visible').length;

优化后的完整代码 #

你可以把重复的统计逻辑封装成函数，减少冗余代码，方便后续维护：

function no(){
    var input, filter, table, tr, td, cell, i, j;
    filter = document.getElementById("searchInput").value.toLowerCase();

    table = document.getElementById("table1");
    tr = table.getElementsByTagName("tr");
    for (i = 1; i < tr.length; i++) {
        tr[i].style.display = "none";
        const tdArray = tr[i].getElementsByTagName("td");
        for (var j = 0; j < tdArray.length; j++) {
            const cellValue = tdArray[j];
            if (cellValue && cellValue.innerHTML.toLowerCase().indexOf(filter) > -1) {
                tr[i].style.display = "";
                break;
            }
        }
    }

    // 封装统计函数，复用逻辑
    function countOperation(text, elementId) {
        var count = $('#table1 tr:contains(' + text + '):visible').length;
        document.getElementById(elementId).innerHTML = text + " Operations: " + count;
    }

    // 调用统计函数完成各类型计数
    countOperation("Update", "update");
    countOperation("HardDelete", "HardDelete");
    countOperation("SoftDelete", "SoftDelete");
    countOperation("Create", "create");
}

关键说明 #

1. 选择器修正：将tr:contains(xxx) tr:visible改为tr:contains(xxx):visible，确保筛选的是同时包含指定文本且可见的行
2. 封装统计函数：避免重复编写相同的DOM操作和计数逻辑，提升代码可读性和可维护性
3. 精准定位表格：使用#table1代替table，防止页面中其他表格干扰统计结果

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