本文详解如何基于数据的逻辑连续性（而非全局频次）动态计算 rowspan，避免因非连续重复导致的表格错位问题，并提供可直接运行的 PHP 实现方案。
本文详解如何基于数据的**逻辑连续性**（而非全局频次）动态计算 `rowspan`，避免因非连续重复导致的表格错位问题，并提供可直接运行的 php 实现方案。
在 HTML 表格中实现“相同名称垂直合并”时，一个常见误区是：直接统计每个名称在整个数组中的总出现次数（如 array_count_values()），然后无差别地为所有同名行设置 rowspan。但正如示例所示，当 Amber 出现在索引 0、1、3 三个位置，且中间被 Ruby 隔开时，若对第 3 行的 Amber 也赋予 rowspan="3"，就会破坏表格结构——因为 rowspan 只应作用于物理上连续的同值区块，而非全局语义相同的全部项。
因此，核心解法是：先按数据原始顺序分组连续段（run-length encoding），再为每一段独立计算 rowspan。这要求我们遍历一次数组，识别值变化的边界点，而非依赖哈希计数。
以下是推荐的健壮实现：
<?php
function renderGroupedTable($gems) {
if (empty($gems)) return '<table><tr><td colspan="2">No data</td></tr></table>';
$html = '<table border="1" style="border-collapse:collapse;">';
$i = 0;
$n = count($gems);
while ($i < $n) {
$currentName = $gems[$i]['name'];
$start = $i;
// 向后扫描，找出当前名称连续出现的长度
while ($i < $n && $gems[$i]['name'] === $currentName) {
$i++;
}
$rowspan = $i - $start;
// 输出首行：带 rowspan 的 name 单元格 + 第一个 value
$html .= '<tr>';
$html .= '<td rowspan="' . $rowspan . '">' . htmlspecialchars($this->n($currentName)) . '</td>';
$html .= '<td>' . htmlspecialchars($this->n($gems[$start]['value'])) . '</td>';
$html .= '</tr>';
// 输出后续行（仅 value 列，name 列由 rowspan 覆盖）
for ($j = $start + 1; $j < $i; $j++) {
$html .= '<tr><td>' . htmlspecialchars($this->n($gems[$j]['value'])) . '</td></tr>';
}
}
$html .= '</table>';
return $html;
}
// 使用示例
$gems = [
['name' => 'Amber', 'value' => 20],
['name' => 'Amber', 'value' => 30],
['name' => 'Ruby', 'value' => 40],
['name' => 'Amber', 'value' => 50],
['name' => 'Emerald', 'value' => 60],
];
echo renderGroupedTable($gems);
?>✅ 关键要点说明：
立即学习“前端免费学习笔记（深入）”；
- 不预分组、不依赖关联数组：避免 group($gems) 中将非连续 Amber 合并为一组，从而导致错误的 rowspan="3"；
- 单次线性扫描：时间复杂度 O(n)，空间复杂度 O(1)，高效且内存友好；
- 安全输出：使用 htmlspecialchars() 防止 XSS，实际项目中应结合模板引擎或更严格的转义策略；
- HTML 语义正确：每组首行包含完整 <td>（含 rowspan）和 <td>（value），后续行仅 <td>（value），确保 <tr> 结构合法、渲染稳定。
⚠️ 注意事项：
- 若需支持多列数据（如 value, color, type），只需在首行 <tr> 中扩展对应 <td>，后续行保持相同列结构即可；
- rowspan 值必须 ≥ 1，本方案天然满足（$i > $start 保证 rowspan ≥ 1）；
- 此逻辑适用于任何按顺序排列的、需视觉聚合的列表场景（如日志按日期分组、订单按客户分组等）。
通过聚焦“连续性”而非“重复性”，你就能生成结构严谨、语义清晰、浏览器兼容性优异的合并表格——这才是 rowspan 的正确打开方式。
