如何根据用户选择的注册颜色生成对应样式的HTML表格输出

需求说明 #

开发用户注册追踪功能，用户注册时可选择红、蓝、黄、绿四种颜色，前端需要按照用户选择的注册颜色展示对应表格结构：同色的红、蓝注册ID放在同一行，黄、绿注册ID每个单独占一行，不同颜色的ID对应不同的徽章样式。

现有问题 #

原有两版代码存在核心缺陷：第一版行切换逻辑混乱、HTML标签闭合错误，第二版存在PHP语法错误、颜色状态更新不及时的问题，导致最终输出的表格结构不符合预期。

修复后代码 #

const RED = 'red',
      BLUE = 'blue',
      GREEN = 'green',
      YELLOW = 'yellow';

function register()
{
    $data = $this->sample->register1();
    $prevColor = '';
    $output = '<table style="margin-top: 5px;" id="display">';
    $rowOpened = false; // 标记当前是否有未闭合的tr标签

    foreach ($data as $f) {
        $currentColor = $f['registercolor'];
        // 匹配对应样式类
        switch ($currentColor) {
            case RED:
                $btnClass = "bg-danger";
                break;
            case BLUE:
                $btnClass = "bg-primary";
                break;
            case GREEN:
                $btnClass = "bg-success";
                break;
            case YELLOW:
                $btnClass = "bg-warning";
                break;
            default:
                $btnClass = "bg-primary";
                break;
        }

        // 处理行切换逻辑
        if (!$rowOpened) {
            // 没有打开的行，先新开行
            $output .= '<tr>';
            $rowOpened = true;
        } else {
            // 已有打开的行，判断是否需要换行：颜色不同且当前颜色不是黄绿
            if ($currentColor !== $prevColor && !in_array($currentColor, [YELLOW, GREEN])) {
                // 闭合当前行，新开行
                $output .= '</tr><tr>';
            } elseif (in_array($currentColor, [YELLOW, GREEN])) {
                // 遇到黄绿，先闭合之前的行，再新开行放黄绿
                $output .= '</tr><tr>';
            }
        }

        // 拼接当前单元格
        $output .= '<td v-align="top"><span data-toggle="tooltip" class="badge ' . $btnClass .
            '" style="font-size: 1.6em; margin: .05em; border-radius: 30px;">' . $f['registerID'] . '</span></td>';

        // 黄绿单独占一行，拼接完直接闭合行
        if (in_array($currentColor, [YELLOW, GREEN])) {
            $output .= '</tr>';
            $rowOpened = false;
        }

        // 更新上一个颜色记录
        $prevColor = $currentColor;
    }

    // 循环结束如果还有未闭合的行，补闭合标签
    if ($rowOpened) {
        $output .= '</tr>';
    }
    $output .= '</table>';

    echo json_encode($output);
}

修正点说明 #

• 新增$rowOpened变量跟踪行标签状态，避免出现多余的空行或者未闭合的标签
• 修正PHP字符串拼接语法，统一用.拼接，删除原有错误的+=写法
• 调整黄绿颜色的处理逻辑：黄绿每个单独占一行，插入后直接闭合当前行
• 同色的红、蓝用户ID会自动合并到同一行展示，切换颜色时自动换行
• 循环结束后统一补全未闭合的行标签，避免HTML结构错误

内容的提问来源于stack exchange，提问作者Ulquiorra Schiffer