如何统计HTML表格搜索后含特定关键词的可见行数？

你的问题出在jQuery选择器的写法上，tr:contains(Create) tr:visible是在找包含Create的tr内部的可见tr，这显然不符合需求——你需要的是同时满足包含关键词且可见的tr，正确的选择器应该把两个伪类放在同一个tr选择器后。

正确的统计代码写法 #

把你原来的统计语句替换成下面的形式，以Create为例：

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

其他关键词的统计同理，比如：

var update = $('table#table1 tr:contains(Update):visible').length;
var HardDelete = $('table#table1 tr:contains(HardDelete):visible').length;
var SoftDelete = $('table#table1 tr:contains(SoftDelete):visible').length;

建议加上表格ID#table1来精准定位，避免页面有多个表格时出现统计错误。

替换后的完整函数代码 #

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;
        }
      }
    }
    
    // 修正后的统计逻辑
    var update = $('table#table1 tr:contains(Update):visible').length;
    document.getElementById("update").innerHTML = "Update Operations: " + update;
     
    var HardDelete = $('table#table1 tr:contains(HardDelete):visible').length;
    document.getElementById("HardDelete").innerHTML = "HardDelete Operations: " + HardDelete;

    var SoftDelete = $('table#table1 tr:contains(SoftDelete):visible').length;
    document.getElementById("SoftDelete").innerHTML = "SoftDelete Operations: " + SoftDelete;

    var Create = $('table#table1 tr:contains(Create):visible').length;
    document.getElementById("create").innerHTML = "Create Operations: " + Create;
}

额外优化建议 #

如果想减少重复代码，可以把关键词和对应的DOM元素封装成数组循环处理，让代码更简洁：

// 替换原来的四个统计语句
const operations = [
  { keyword: 'Update', elementId: 'update' },
  { keyword: 'HardDelete', elementId: 'HardDelete' },
  { keyword: 'SoftDelete', elementId: 'SoftDelete' },
  { keyword: 'Create', elementId: 'create' }
];

operations.forEach(op => {
  const count = $(`table#table1 tr:contains(${op.keyword}):visible`).length;
  document.getElementById(op.elementId).innerHTML = `${op.keyword} Operations: ${count}`;
});

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