如何对包含rowspan属性的表格实现正确筛选？

问题根源：你的JS筛选逻辑只检查每行的第一个<td>，但使用rowspan合并单元格后，同一患者的后续行没有第一个<td>，这些行会因td不存在被判定为不匹配，从而被隐藏，导致只显示一行。

修复步骤： #

1. 修改Jinja2模板，给每行添加患者标识

给每个<tr>加上data-patient-name属性，关联到对应的患者名称，确保同一患者的所有行都有统一标识：

{% for patient_name, patient_data in patients.items() %}
    {% set rowspan = patient_data.tests|length %}
    {% for test in patient_data.tests %}
        <tr data-patient-name="{{ patient_name }}">
            {% if loop.first %}
                <td rowspan="{{ rowspan }}">{{ patient_name }}</td>
            {% endif %}
            <td>{{ test.patientid }}</td>
            <td>{{ test.labid }}</td>
            <td>{{ test.patientsex }}</td>
            <td>{{ test.patientage }}</td>
            <!-- 补全你原本缺失的表格闭合标签 -->
        </tr>
    {% endfor %}
{% endfor %}

2. 重写JavaScript筛选函数

调整逻辑，先找出所有匹配的患者，再将该患者的所有行统一显示/隐藏：

function filterTable() {
    var input = document.getElementById("filterInput");
    var filter = input.value.toUpperCase().trim();
    var table = document.getElementById("report-table");
    var trList = table.getElementsByTagName("tr");
    var matchedPatients = new Set();

    // 第一步：收集所有符合筛选条件的患者名称
    for (var i = 0; i < trList.length; i++) {
        var tr = trList[i];
        // 优先取data属性，兼容无首td的行
        var patientName = tr.dataset.patientName || 
                          (tr.getElementsByTagName("td")[0]?.textContent || tr.getElementsByTagName("td")[0]?.innerText);
        if (patientName) {
            if (filter === "" || patientName.toUpperCase().includes(filter)) {
                matchedPatients.add(patientName);
            }
        }
    }

    // 第二步：根据匹配结果控制行的显示状态
    for (var i = 0; i < trList.length; i++) {
        var tr = trList[i];
        if (matchedPatients.has(tr.dataset.patientName)) {
            tr.style.display = "";
        } else {
            tr.style.display = "none";
        }
    }
}

原理说明： #

• 通过data-patient-name将同一患者的所有行绑定，避免因单元格合并导致的筛选判断缺失。
• 先批量收集匹配的患者，再统一处理该行组的显示状态，确保同一患者的所有行始终同步显示或隐藏。

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