javascript - 即使我们有多行返回到Ajax并显示，如何使用rowpan将同一患者姓名分组到一个单元格中

我需要重新格式化显示来自Ajax响应结果的html表。

通常，每个患者可能有1种或多种药物，并且表格如下所示：



我想要的是，只要我们显示相同的患者姓名，就需要使用行跨将Patient 1的3个单元格分组为一个单元格。

这是我如何从服务器获取数据并使用Ajax和jquery将它们显示到html页面中的方法：

     $.ajax({
        url:'../php/getTemplateThreeData.php',
        type: 'POST',
        data: {monthVal, nationality},
        dataType: 'JSON',
        success:function(resp)
        {
            $("#tempThreeTable #fade").fadeOut(400);
            $.each(resp, function(key, result)
            {
                if(result['nationality']=='something')
                {
                    $('#after_tr').after("<tr id='fade'><td>"
                        +result['patient_name_en']+"</td><td>"
                        +result['nationality']+"</td><td>"
                        +result['registration_number']+"</td><td>"
                        +result['gender']+"</td><td style='width: fit'>"
                        +result['dob']+"</td><td>"
                        +result['patient_address']+"</td><td>"
                        +result['med_name']+"</td><td>"
                        +result['given_quantity']+"</td></tr>");
                }
                else
                {
                    $('#after_tr').after("<tr id='fade'><td>"
                        +result['patient_name_en']+"</td><td>"
                        +result['nationality']+"</td><td>"
                        +result['patient_id']+"</td><td>"
                        +result['gender']+"</td><td style='width: fit'>"
                        +result['dob']+"</td><td>"
                        +result['patient_address']+"</td><td>"
                        +result['med_name']+"</td><td>"
                        +result['given_quantity']+"</td></tr>");
                }
            });
        },
        error:function(resp)
        {

        }

该查询如下（我尝试向其添加子查询，但是该查询不起作用，因为如果同一患者出现3次，则同一药物的计数为2，另一药物的计数为1 ）：

$getTempThree = "SELECT
    patient.patient_id,
    CONVERT(aes_decrypt(patient.patient_name_en, :encKey)USING utf8mb4) as patient_name_en,
    patient.nationality,
    CONVERT(aes_decrypt(patient.registration_number, :encKey) USING utf8mb4) as unhcr_registration_number,
    patient.gender,
    patient.dob,
    patient.patient_address,
    medication.med_name,
    sum(consultation_med.given_quantity) as given_quantity
FROM
    patient
LEFT JOIN
    visit
ON
    patient.patient_id = visit.patient_id
LEFT JOIN
    consultation
ON
    consultation.visit_id = visit.visit_id
LEFT JOIN
    consultation_med
ON
    consultation_med.consultation_id = consultation.consultation_id
LEFT JOIN
    med_pharmacy
ON
    med_pharmacy.med_pharmacy_id = consultation_med.med_pharmacy_id
LEFT JOIN
    medication
ON
    medication.med_id = med_pharmacy.med_id
WHERE
    consultation_med.clinic_id = :cid
AND
    patient.nationality = :nationality
AND
    DATE_FORMAT(visit.date_of_visit, '%Y-%m') = :getDate
AND
    medication.med_type = :medType
GROUP BY
    patient.patient_id,
    medication.med_name
ORDER BY
    patient_name_en DESC
";

JSON响应：


  [{0：“ someID”，1：“患者1”，2：“叙利亚人”，3：“”，4：“女性”，5：
  “ 1954-10-19”，…}，…] 0：{0：“ someID，1：” Patient1“，2：”叙利亚“，3：”，“
  4：“女性”，5：“ 1954-10-19”，…} 1：{0：“ someID”，1：“ Patient1”，2：
  “叙利亚人”，3：“”，4：“女性”，5：“ 1954-10-19”，…} 2

最佳答案

.reduce resp遍历各个患者，然后遍历。

const consolidated = resp.reduce((consolidatedSoFar, result) => {
  const id = result.registration_number;
  const thisMedicine = { med_name: result.med_name, given_quantity: result.given_quantity };
  if (!consolidatedSoFar[id]) {
    consolidatedSoFar[id] = result;
    result.medicines = [thisMedicine];
  } else {
    result.medicines.push(thisMedicine);
  }
}, {});

然后，在创建表格时，为除药品名称/数量以外的所有元素赋予result.medicines.length行距：

const rowspan = result.medicine.length;
if(result['nationality']=='something') {
  $('#after_tr').after("<tr id='fade'><td rowspan='" + rowspan + "'>"
                        +result['patient_name_en']+"</td><td>"

如果有不止一种药物，则在每个<tr>后面附加与med_name和Given_quantity相对应的两个<td>。