如何将MySQL数据转换为按学期分组的HTML表格布局

本教程详细介绍了如何将从MySQL数据库中获取的扁平化数据（包含学期、课程和评估信息）转换为一种转置且按学期分组的HTML表格布局。文章将逐步指导您如何通过PHP对数据进行预处理（按学期分组），并动态生成表格的头部和主体内容，最终实现所需的数据展示效果。

需求分析：从扁平数据到转置表格

在Web开发中，我们经常需要将数据库中的数据以特定的格式展示给用户。一个常见的挑战是将传统的关系型数据（每行代表一个记录）转换为更具聚合性和分析性的视图。例如，从MySQL获取的数据可能呈现为以下结构：

然而，我们期望的HTML表格布局是这样的：

这种转换要求我们将“Term”（学期）从行数据转换为列标题，并将每个学期下的所有“Course”（课程）及其“ASSESSED”（评估）信息垂直列出。

立即学习“前端免费学习笔记（深入）”；

解决方案：分步实现数据转换与表格生成

实现上述表格布局需要两个主要步骤：首先，对原始数据进行预处理，按学期进行分组；其次，根据分组后的数据动态生成HTML表格。

步骤一：数据预处理——按学期分组

从MySQL获取的数据通常是一个扁平的数组，其中每个元素代表一行记录。为了方便后续的表格生成，我们需要将这些数据按照“Term”字段进行分组，形成一个二维数组，其中每个键代表一个学期，其值是一个包含该学期所有课程信息的数组。同时，我们将“Course”和“ASSESSED”信息合并为单个字符串，以便在表格中显示。

假设从数据库获取的原始数据存储在一个名为 $initialData 的数组中，其结构类似：

$initialData = [
    ['Term' => 1, 'Course' => 'SCIENCE-100', 'ASSESSED' => ''],
    ['Term' => 1, 'Course' => 'STEM-200', 'ASSESSED' => 'BC'],
    ['Term' => 2, 'Course' => 'ASP-400', 'ASSESSED' => 'AB'],
    ['Term' => 3, 'Course' => 'LEV-100', 'ASSESSED' => 'CD'],
    ['Term' => 3, 'Course' => 'WEL-200', 'ASSESSED' => 'AB'],
];

我们可以使用以下PHP代码对其进行分组：

CA.LA

第一款时尚产品在线设计平台，服装设计系统

下载

$groupedByTerm = [];
foreach ($initialData as $item) {
    $term = $item['Term'];
    $course = $item['Course'];
    $assessed = $item['ASSESSED'];

    // 如果该学期尚未存在，则初始化其课程数组
    if (!isset($groupedByTerm[$term])) {
        $groupedByTerm[$term] = [];
    }

    // 合并课程和评估信息
    $courseDisplay = htmlspecialchars($course); // 确保输出安全
    if (!empty($assessed)) {
        $courseDisplay .= ' (' . htmlspecialchars($assessed) . ')';
    }

    // 将合并后的课程信息添加到对应学期的数组中
    $groupedByTerm[$term][] = $courseDisplay;
}

经过此步骤，$groupedByTerm 数组将变为以下结构：

// 示例 $groupedByTerm 数组结构
[
    1 => [
        'SCIENCE-100',
        'STEM-200 (BC)'
    ],
    2 => [
        'ASP-400 (AB)'
    ],
    3 => [
        'LEV-100 (CD)',
        'WEL-200 (AB)'
    ],
];

这种结构使得我们可以轻松地按学期访问其下的所有课程。

步骤二：动态生成HTML表格

有了按学期分组的数据后，我们可以开始构建HTML表格。这包括生成表格头部（包含学期标题）和表格主体（包含课程列表）。

1. 生成表格头部 ()

表格的头部需要动态地列出所有存在的学期。我们可以通过获取 $groupedByTerm 数组的所有键（即学期编号）来构建头部。

echo ''; // 添加表格样式类
echo '';
echo ''; // 第一列标题为“Term”

// 动态生成学期列标题
foreach (array_keys($groupedByTerm) as $termHeader) {
    echo '';
}
echo '';
2. 生成表格主体 (
)
表格主体是动态生成的核心部分。由于每个学期可能包含不同数量的课程，我们需要一种机制来遍历所有学期，并在同一行显示对应位置的课程。这可以通过一个 do-while 循环和行索引 $row 来实现。
echo '';

$row = 0; // 初始化行索引
do {
    $hasData = false; // 标记当前行是否有数据
    echo '';

    // 处理第一列的“Course”或空单元格
    if ($row == 0) {
        echo '';
    } else {
        echo '';
    }

    // 遍历每个学期，显示对应行的课程
    foreach ($groupedByTerm as $termCourses) {
        echo '';
    }
    echo '';
    $row++; // 移动到下一行

} while ($hasData); // 只要有任何学期在当前行还有数据，就继续循环

echo '';
echo '
Term
' . htmlspecialchars($termHeader) . '
Course
';
        // 检查当前学期是否有当前行对应的课程
        if (is_array($termCourses) && isset($termCourses[$row])) {
            $hasData = true; // 发现数据，继续循环
            echo $termCourses[$row];
        }
        echo '
';

do-while 循环的关键在于 $hasData 变量。它确保了即使某些学期在早期就用完了课程，循环也会继续，直到所有学期的所有课程都被显示完毕。当 $hasData 在某一行遍历所有学期后仍为 false，说明所有学期在该行及后续行都已无数据，循环便会终止。

 1, 'Course' => 'SCIENCE-100', 'ASSESSED' => ''],
    ['Term' => 1, 'Course' => 'STEM-200', 'ASSESSED' => 'BC'],
    ['Term' => 2, 'Course' => 'ASP-400', 'ASSESSED' => 'AB'],
    ['Term' => 3, 'Course' => 'LEV-100', 'ASSESSED' => 'CD'],
    ['Term' => 3, 'Course' => 'WEL-200', 'ASSESSED' => 'AB'],
    ['Term' => 1, 'Course' => 'MATH-300', 'ASSESSED' => 'A'], // 更多数据以测试多行
    ['Term' => 3, 'Course' => 'ART-100', 'ASSESSED' => 'B'],
];

// 步骤一：数据预处理 - 按学期分组
$groupedByTerm = [];
foreach ($initialData as $item) {
    $term = $item['Term'];
    $course = $item['Course'];
    $assessed = $item['ASSESSED'];

    if (!isset($groupedByTerm[$term])) {
        $groupedByTerm[$term] = [];
    }

    $courseDisplay = htmlspecialchars($course);
    if (!empty($assessed)) {
        $courseDisplay .= ' (' . htmlspecialchars($assessed) . ')';
    }
    $groupedByTerm[$term][] = $courseDisplay;
}

// 确保学期按数字顺序排列，这对于表格头部很重要
ksort($groupedByTerm);

// 步骤二：动态生成HTML表格
echo '';
echo '';
echo '';
echo '';
echo '';
echo '';
echo '';
echo '';

echo '';
echo '';
echo ''; // 表格第一列标题

// 动态生成学期列标题
foreach (array_keys($groupedByTerm) as $termHeader) {
    echo '';
}
echo '';

echo '';
$row = 0;
do {
    $hasData = false;
    echo '';
    if ($row == 0) {
        echo ''; // 表格第一行第一列为“Course”
    } else {
        echo ''; // 其他行第一列为空
    }

    // 遍历每个学期的数据
    foreach ($groupedByTerm as $termCourses) {
        echo '';
    }
    echo '';
    $row++;
} while ($hasData); // 只要有任何学期在当前行还有数据，就继续循环

echo '';
echo '
Term
' . htmlspecialchars($termHeader) . '
Course
';
        if (is_array($termCourses) && isset($termCourses[$row])) {
            $hasData = true; // 发现数据，继续循环
            echo $termCourses[$row];
        }
        echo '
';

echo '';
echo '';

?>