解决带rowspan/colspan的表格搜索时子行无法隐藏的问题

这个问题的核心是你需要按「行组」来处理显示/隐藏，而不是单个行——因为带rowspan的主行和它后续的子行是一个整体。原来的代码只检查了每一行的第一列，但子行的第一列其实被主行的rowspan覆盖了，根本取不到有效匹配内容，导致子行没被正确处理。

实现思路 #

1. 按「组」遍历表格tbody的行：只有包含第一列（带有rowspan属性）的行是组的起始行。
2. 对每个组起始行，获取它的rowspan值，就能知道这个组包含多少行（比如rowspan=2，就是主行+1个子行，共2行）。
3. 检查组起始行的第一列文本是否匹配搜索关键词。
4. 根据匹配结果，控制整个组的所有行显示或隐藏。
5. 处理完一个组后，直接跳到下一个组的起始行，避免重复处理子行。

修改后的JavaScript代码 #

$(".table-search").on("keyup", function() {
    var value = $(this).val().toLowerCase().trim();
    var table = $('#' + $(this).attr("data-table-search")).find('tbody');
    var rows = table.find('tr');
    var i = 0;
    
    while (i < rows.length) {
        var $row = $(rows[i]);
        var $firstTd = $row.find("td:first");
        // 获取当前组的行数：没有设置rowspan时默认是1
        var rowSpan = parseInt($firstTd.attr('rowspan') || 1);
        var groupText = $firstTd.text().toLowerCase().trim();
        
        // 判断当前组是否匹配搜索值（空搜索时显示所有行）
        var isMatch = value === '' || groupText.includes(value);
        
        // 控制当前组所有行的显示/隐藏
        for (var j = 0; j < rowSpan; j++) {
            if (i + j < rows.length) {
                $(rows[i + j]).toggle(isMatch);
            }
        }
        
        // 跳到下一个组的起始行
        i += rowSpan;
    }
});

关键改进点 #

• 按组遍历：用while循环配合rowspan值跳过子行，确保每个组只处理一次，避免重复操作。
• trim()处理：去除文本前后空格，避免因为原文本的空格（比如示例里"Foo "后面的空格）导致匹配失败。
• 空搜索兼容：当搜索框为空时自动显示所有行，提升用户体验。
• toggle()简化逻辑：直接根据匹配状态切换行的显示/隐藏，代码更简洁。

效果验证 #

当你输入"foo"时，会匹配第一组的主行文本"Foo"（忽略大小写和空格），显示该组的2行；第二组的"Bar"不匹配，整个组的2行会被隐藏，完全符合你的需求。

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