如何优化HTML表格：相同Name Product单元格仅显示一次并分组

现有表格 #

现有SQL语句 #

$query = "SELECT *, GROUP_CONCAT(`Code Unit`) AS Codeunit, COUNT(`Code Unit`) AS NoU FROM `stock goods` GROUP BY `Name Product`, `Type` ORDER BY `Name Product`, `Type`";

注：NoU对应表格中的Num of Units，数据表包含Code Unit字段。

当前PHP代码 #

echo "<table id='customers'>";
echo "<tr><th id='No'>Nomor</th><th id='nameproduct'>Name Product</th><th id='type'>Type</th><th id='NoU'>Num of Units</th><th id='Click'>Botton Click</th></tr>";
$nomor_urut = 1;
$nomy = 1;
while ($row = mysqli_fetch_assoc($result)) {
    $nomy = 1;
    echo "<tr>";
    echo "<td>" . $nomor_urut."</td>";
    echo "<td>" . $row["Name Product"] . "</td>";
    echo "<td>" . $row["Type"] . "</td>";
    echo "<td>" . $row["NoU"] . "</td>";
    $Type2 = explode(',', $row["Type"]);
    $Kodeunits = explode(',', $row["Kodeunit"]);
    $dara = $row["Type"] . " - " . $row["Jumlah"] . "<br>";
    echo "<td><button onclick='myFunction(" . json_encode($row["Nama Produk"]) . "," . json_encode($row["Type"]) . ",". json_encode($Kodeunits) . ")'>List Stock</button></td>";
    echo "</tr>";
    $nomor_urut++;
}
echo "</table>";

期望表格样式 #

需求说明 #

• 相同的Name Product仅在对应组的某一行显示，其余行该单元格为空
• 不同产品组之间添加空行分隔，提升表格可读性

修改后的PHP代码 #

echo "<table id='customers'>";
echo "<tr><th id='No'>Nomor</th><th id='nameproduct'>Name Product</th><th id='type'>Type</th><th id='NoU'>Num of Units</th><th id='Click'>Button Click</th></tr>";

$nomor_urut = 1;
$prev_product = '';
$rows = [];

// 先把所有查询结果存入数组，方便判断组边界
while ($row = mysqli_fetch_assoc($result)) {
    $rows[] = $row;
}

foreach ($rows as $index => $row) {
    $current_product = $row["Name Product"];
    
    // 不同产品组之间插入空行（跳过第一个组）
    if ($index > 0 && $current_product != $prev_product) {
        echo "<tr><td></td><td></td><td></td><td></td><td></td></tr>";
    }
    
    echo "<tr>";
    echo "<td>" . $nomor_urut . "</td>";
    
    // 控制产品名显示：仅在组内第二行显示，其余行留空
    $product_display = '';
    $group_start = $index;
    while ($group_start > 0 && $rows[$group_start-1]["Name Product"] == $current_product) {
        $group_start--;
    }
    if ($index == $group_start + 1) {
        $product_display = $current_product;
    }
    echo "<td>" . $product_display . "</td>";
    
    echo "<td>" . $row["Type"] . "</td>";
    echo "<td>" . $row["NoU"] . "</td>";
    
    // 修正原代码变量名错误
    $Kodeunits = explode(',', $row["Codeunit"]);
    echo "<td><button onclick='myFunction(" . json_encode($row["Name Product"]) . "," . json_encode($row["Type"]) . ",". json_encode($Kodeunits) . ")'>List Stock</button></td>";
    
    echo "</tr>";
    
    $nomor_urut++;
    $prev_product = $current_product;
}

echo "</table>";

代码说明 #

1. 预读取数据：将所有查询结果存入数组，方便判断产品组的起始与结束位置，实现组间空行逻辑。
2. 组间空行：遍历到不同产品时，在当前行前插入空行（第一个组前不插入）。
3. 产品名显示控制：通过计算当前行在组内的位置，仅在组内第二行显示产品名，其余行留空，完全匹配期望样式。
4. 变量修正：修复原代码中Kodeunit（应为SQL别名Codeunit）、Nama Produk（应为Name Product）的变量名错误。

内容的提问来源于stack exchange，提问作者Ricky Suwandi