本文详解如何通过 PHP 动态计算 rowspan 值，结合 MySQL GROUP_CONCAT 分组结果，在 HTML 中智能合并重复的“Name Product”单元格，使表格结构更清晰、专业。
本文详解如何通过 php 动态计算 rowspan 值，结合 mysql group_concat 分组结果，在 html `
在实际 Web 开发中，当数据库查询返回按 Name Product 和 Type 分组的数据（如使用 GROUP BY Name Product, Type + GROUP_CONCAT(Code Unit)），直接逐行渲染会导致同一产品多次重复显示——这既浪费空间，又降低可读性。理想效果是：每个产品名称仅在首行显示，并通过 rowspan 跨越其所属的所有 Type 行，其余行该列留空。
✅ 正确实现思路：分离数据处理与模板渲染
核心在于 避免边查边输出。你不能在 while 循环中立即 echo "<td>..."，因为此时你还不知道该产品总共包含多少个 <code>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 < $count; $i++) {
$records[count($records)-1]['types'][] = [
'no' => $nomor_urut++,
'type' => $types[$i],
'units' => $row["NoU"], // 或动态计算：$codes[$i] 对应数量？
'buttonData' => [
'productName' => $productName,
'type' => $types[$i],
'codeList' => $codes
]
];
}
}3. 渲染 HTML 表格（含 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>';
foreach ($records as $group) {
$rowCount = count($group['types']);
// 第一行：显示产品名 + rowspan
$first = $group['types'][0];
echo "<tr>";
echo "<td>{$first['no']}</td>";
echo "<td rowspan='{$rowCount}'>{$group['name']}</td>";
echo "<td>{$first['type']}</td>";
echo "<td>{$first['units']} Pcs</td>";
echo "<td><button onclick='myFunction(" . json_encode($first['buttonData']['productName'])
. "," . json_encode($first['buttonData']['type'])
. "," . json_encode($first['buttonData']['codeList'])
. ")'>List Stock</button></td>";
echo "</tr>";
// 后续行：仅 Type / Units / Button，Name Product 列跳过
for ($i = 1; $i < $rowCount; $i++) {
$item = $group['types'][$i];
echo "<tr>";
echo "<td>{$item['no']}</td>";
echo "<td>{$item['type']}</td>";
echo "<td>{$item['units']} Pcs</td>";
echo "<td><button onclick='myFunction(" . json_encode($item['buttonData']['productName'])
. "," . json_encode($item['buttonData']['type'])
. "," . json_encode($item['buttonData']['codeList'])
. ")'>List Stock</button></td>";
echo "</tr>";
}
}
echo '</tbody></table>';? 注意事项与最佳实践
-
rowspan必须为整数且 ≥1：确保$rowCount > 0，空分组需过滤； -
JSON 编码安全：始终用
json_encode()处理 JavaScript 参数，防止 XSS 和语法错误； -
前端兼容性：
rowspan在所有现代浏览器中完全支持，无需 Polyfill； -
可访问性增强：为合并单元格添加
aria-label或使用<caption></caption>提升语义化； -
性能提示：大数据量时，考虑分页或虚拟滚动，避免一次性加载过多
rowspan计算。
通过以上结构化处理，你不仅能精准控制 <td> 的跨行行为，还能让代码具备可维护性、可测试性与扩展性——这才是真正符合“关注点分离”原则的专业实践。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
</td>
