如何在Ajax返回多行列时用rowspan合并同患者姓名的单元格？

我来帮你搞定这个同一患者合并单元格的需求，核心思路是先把返回的数据按患者分组，再根据分组后的条数设置rowspan属性，具体实现代码和解释如下：

核心步骤 #

• 先将服务器返回的患者数据按姓名（或唯一患者ID）分组，把同一患者的所有药物数据归为一组
• 渲染表格时，每组的第一条数据渲染合并单元格（设置rowspan为组内数据的总条数），组内其他数据跳过基础信息列的渲染

完整jQuery代码示例 #

$.ajax({
    url: '../php/getTemplateThreeData.php',
    type: 'POST',
    data: { monthVal, nationalId }, // 这里补充你完整的请求参数
    dataType: 'json',
    success: function(response) {
        // 1. 按患者姓名分组（建议用唯一患者ID作为分组键，避免重名混淆）
        const groupedPatients = {};
        response.forEach(item => {
            // 替换成你的患者唯一标识字段，比如patientId
            const patientKey = item.patientName;
            if (!groupedPatients[patientKey]) {
                groupedPatients[patientKey] = [];
            }
            groupedPatients[patientKey].push(item);
        });

        // 2. 构建表格HTML
        let tableContent = `
            <table border="1" cellpadding="8" cellspacing="0">
                <thead>
                    <tr>
                        <th>患者姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>药物名称</th>
                        <th>用药剂量</th>
                    </tr>
                </thead>
                <tbody>
        `;

        // 遍历每个患者组
        Object.values(groupedPatients).forEach(patientGroup => {
            const totalDrugs = patientGroup.length;
            patientGroup.forEach((item, idx) => {
                tableContent += '<tr>';
                // 仅在组内第一条数据渲染合并单元格
                if (idx === 0) {
                    tableContent += `<td rowspan="${totalDrugs}">${item.patientName}</td>`;
                    tableContent += `<td rowspan="${totalDrugs}">${item.gender || '-'}</td>`;
                    tableContent += `<td rowspan="${totalDrugs}">${item.age || '-'}</td>`;
                }
                // 每条数据都渲染药物相关列
                tableContent += `<td>${item.drugName}</td>`;
                tableContent += `<td>${item.dosage}</td>`;
                tableContent += '</tr>';
            });
        });

        tableContent += '</tbody></table>';
        // 将渲染好的表格插入到页面指定容器
        $('#yourTableContainer').html(tableContent);
    },
    error: function(xhr, status, err) {
        console.error('数据请求失败:', err);
        alert('获取患者数据失败，请稍后重试');
    }
});

关键细节说明 #

1. 分组键的选择：如果系统中有患者唯一ID（比如patientId），一定要用它作为分组键，比姓名更可靠，避免同名患者被错误合并
2. 合并逻辑：通过rowspan="${totalDrugs}"让基础信息单元格跨组内所有药物数据行，组内后续数据跳过这些列的渲染，避免重复
3. 容错处理：给字段加上|| '-'，防止数据为空时表格显示异常
4. 样式调整：可以根据你的需求修改表格的border、cellpadding等样式，或者用CSS单独控制

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