本文详解如何通过 PHP 预处理 + HTML rowspan 属性，将同名“Name Product”的多条记录合并显示——仅首行显示产品名称，其余行留空，使表格结构更清晰、专业。
本文详解如何通过 php 预处理 + html `rowspan` 属性，将同名“name product”的多条记录合并显示——仅首行显示产品名称，其余行留空，使表格结构更清晰、专业。
在构建动态数据表格时，直接逐行输出（echo）虽简单，但难以实现语义化布局——尤其是当需要按“Name Product”分组、对重复值做视觉合并（如仅首行显示产品名，后续同组行留空）时，必须先分析数据结构，再生成 HTML。核心在于：分离数据处理与模板渲染，避免边读取边输出导致无法回溯和计算 rowspan。
✅ 正确思路：两阶段处理
-
第一阶段（数据聚合）：遍历查询结果，按
Name Product分组，并统计每组出现次数（即需rowspan的行数）； -
第二阶段（模板渲染）：遍历分组数据，对每组首行输出完整
<td> 并设置 <code>rowspan，其余行对应列输出空<td> 或跳过。<h3>? 关键代码实现（精简可运行版）</h3><pre class="brush:php;toolbar:false;"><?php // 1️⃣ 数据预处理：按 Name Product 分组并记录每组行数 $groups = []; $nomor_urut = 1; while ($row = mysqli_fetch_assoc($result)) { $productName = $row["Name Product"]; $type = $row["Type"]; $noU = $row["NoU"]; $kodeUnits = explode(',', $row["Kodeunit"] ?? ''); if (!isset($groups[$productName])) { $groups[$productName] = [ 'rows' => [], 'rowspan' => 0 ]; } $groups[$productName]['rows'][] = [ 'type' => $type, 'noU' => $noU, 'kodeUnits' => $kodeUnits ]; $groups[$productName]['rowspan']++; } // 2️⃣ 渲染表格：逐组输出，控制 rowspan 和空单元格 echo '<table id="customers" class="s-table">'; echo '<thead><tr> <th>No</th> <th>Name Product</th> <th>Type</th> <th>Num of Units</th> <th>Button Click</th> </tr></thead><tbody>'; $globalIndex = 1; // 全局序号（1,2,3...） foreach ($groups as $productName => $group) { $rows = $group['rows']; $rowspan = $group['rowspan']; for ($i = 0; $i < count($rows); $i++) { echo '<tr>'; // No 列：每行独立编号 echo '<td>' . $globalIndex++ . '</td>'; // Name Product 列：仅首行显示，带 rowspan if ($i === 0) { echo '<td rowspan="' . $rowspan . '">' . htmlspecialchars($productName) . '</td>'; } // Type & Num of Units 列：每行独立 echo '<td>' . htmlspecialchars($rows[$i]['type']) . '</td>'; echo '<td>' . htmlspecialchars($rows[$i]['noU']) . ' Pcs</td>'; // Button 列：传递当前 Type 和 KodeUnits 数组（安全 JSON 编码） $btnData = json_encode([ 'product' => $productName, 'type' => $rows[$i]['type'], 'units' => $rows[$i]['kodeUnits'] ]); echo '<td><button onclick="myFunction(' . $btnData . ')">List Stock</button></td>'; echo '</tr>'; } } echo '</tbody></table>'; ?></pre><h3>⚠️ 注意事项与最佳实践</h3> <ul> <li> <strong>安全输出</strong>：始终使用 <code>htmlspecialchars()转义动态内容，防止 XSS； -
JSON 编码规范：向
onclick传递复杂数据时，用json_encode()并确保整个字符串被单引号包裹（如示例），避免引号冲突； -
SQL 字段一致性：确认数据库字段名（如
Nama ProdukvsName Product）与 PHP 中$row["Name Product"]严格匹配（含空格/大小写）； -
空数据兜底：
$row["Kodeunit"] ?? ''防止explode()报错； -
性能提示：大数据量时，建议在 SQL 层用
GROUP_CONCAT+SUBSTRING_INDEX辅助解析，而非 PHP 处理。
✅ 最终效果
表格中相同 Name Product（如 ADA、DUZK）的多行记录，将自动合并为逻辑组：
✅ 第一行显示产品名 + rowspan="3"（对应3种 Type）；
✅ 后续两行该列为空，保持对齐；
✅ 每行仍独立展示 Type、数量及操作按钮。
这种结构既符合语义化 HTML 标准，又大幅提升可读性与专业度——是报表类页面的推荐实践。
