使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

本文详解如何通过 PHP 动态计算 rowspan 值，结合 MySQL GROUP_CONCAT 分组结果，在 HTML 中智能合并重复的“Name Product”单元格，使表格结构更清晰、专业。 本文详解如何通过 PHP 动态计算 rowspan 值，结合 MySQL GROUP_CONCAT 分组结果，在 HTML `` 中智能合并重复的“Name Product”单元格，使表格结构更清晰、专业。在实际 Web 开发中，当数据库查询返回按 Name Product 和 Type 分组的数据（如使用 GROUP BY Name Product, Type + GROUP_CONCAT(Code Unit)），直接逐行渲染会导致同一产品多次重复显示——这既浪费空间，又降低可读性。理想效果是：每个产品名称仅在首行显示，并通过 rowspan 跨越其所属的所有 Type 行，其余行该列留空。✅ 正确实现思路：分离数据处理与模板渲染核心在于 避免边查边输出。你不能在 while 循环中立即 echo "..."，因为此时你还不知道该产品总共包含多少个 Type（即需要跨几行）。必须先将原始数据结构化为嵌套数组，再统一计算 rowspan 并生成 HTML。1. SQL 查询建议（保持分组逻辑）SELECT `Name Product`, `Type`, COUNT(`Code Unit`) AS `NoU`, GROUP_CONCAT(`Code Unit` SEPARATOR ',') AS `Kodeunit` FROM `stock goods` GROUP BY `Name Product`, `Type` ORDER BY `Name Product`, `Type`;⚠️ 注意：GROUP_CONCAT 默认长度限制为 1024 字符。若 Code Unit 较多，请在查询前执行 SET SESSION group_concat_max_len = 10000;

2. PHP 数据预处理（关键步骤）

$records = []; // 存储分组后的二维结构：[product][types]
$currentProduct = null;
$nomor_urut = 1;

while ($row = mysqli_fetch_assoc($result)) {
    $productName = $row["Name Product"];

    // 检测产品变更 → 新建分组
    if ($productName !== $currentProduct) {
        $currentProduct = $productName;
        $records[] = [
            'name' => $productName,
            'types' => []
        ];
    }

    // 解析当前 Type 和对应 Code Units（支持多值逗号分隔）
    $types = array_filter(array_map('trim', explode(',', $row["Type"])));
    $codes = array_filter(array_map('trim', explode(',', $row["Kodeunit"])));

    // 确保数量一致，避免下标越界
    $count = min(count($types), count($codes));
    for ($i = 0; $i  $nomor_urut++,
            'type'    => $types[$i],
            'units'   => $row["NoU"], // 或动态计算：$codes[$i] 对应数量？
            'buttonData' => [
                'productName' => $productName,
                'type'        => $types[$i],
                'codeList'    => $codes
            ]
        ];
    }
}

3. 渲染 HTML 表格（含 rowspan 合并）

echo '

'; echo ''; foreach ($records as $group) { $rowCount = count($group['types']); // 第一行：显示产品名 + rowspan $first = $group['types'][0]; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; // 后续行：仅 Type / Units / Button，Name Product 列跳过 for ($i = 1; $i "; echo ""; echo ""; echo ""; echo ""; echo ""; } } echo '

No	Name Product	Type	Num of Units	Button Click
{$first['no']}	{$group['name']}	{$first['type']}	{$first['units']} Pcs	List Stock
{$item['no']}	{$item['type']}	{$item['units']} Pcs	List Stock

';

? 注意事项与最佳实践

• rowspan 必须为整数且 ≥1：确保 $rowCount > 0，空分组需过滤；
• JSON 编码安全：始终用 json_encode() 处理 JavaScript 参数，防止 XSS 和语法错误；
• 前端兼容性：rowspan 在所有现代浏览器中完全支持，无需 Polyfill；
• 可访问性增强：为合并单元格添加 aria-label 或使用 提升语义化；
• 性能提示：大数据量时，考虑分页或虚拟滚动，避免一次性加载过多 rowspan 计算。

通过以上结构化处理，你不仅能精准控制 的跨行行为，还能让代码具备可维护性、可测试性与扩展性——这才是真正符合“关注点分离”原则的专业实践。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！