PHP循环输出数据库行时如何实现隔行交替样式且不重复输出数据

• 已实现数据库记录拉取与前端渲染，需要为列表行配置交替差异化样式：奇数行蓝色样式、偶数行绿色样式，每行仅展示1次对应用户名，禁止同一条用户名重复输出
• 现有代码逻辑为PHP循环读取数据库结果集，逐行输出对应HTML结构，原有实现存在单条记录重复输出两次的问题

原有循环逻辑中，单次读取1条用户记录时会同时输出蓝色、绿色两个<tr>行，直接导致单条用户名重复渲染2次，且HTML标签存在错位（<a>标签未闭合、多余<span>闭合标签），无法实现交替效果。
原有核心问题代码段：

if (mysqli_num_rows($result) > 0) {
    // output data of each row
    while($row = mysqli_fetch_assoc($result)) {
        // 单条循环内输出了2个tr，导致重复渲染
        echo '<tr class="hscrB"><td><img src="./ Charity Contributors_files/ICON.ico" alt=""> <a class="user-link" style="" target="_blank">'. '' . $row["username"].  '</span></td></tr><tr class="hscrG"><td><img src="./ Charity Contributors_files/ICON.ico" alt=""> <a class="user-link" style="" target="_blank">'  . $row["username"]. '';
    }
} else {
    echo "0 results";
}

通过循环外初始化的交替标记变量控制每行样式，单条记录仅输出1行结构，每次循环结束后翻转标记值，即可实现自动交替样式，同时避免重复输出：

1. 在进入循环前初始化布尔类型标记变量，用于标识当前行是否应用蓝色样式
2. 循环内根据标记值选择当前行对应的样式class
3. 输出完整、标签匹配的单行HTML结构，对输出的用户名做HTML转义避免XSS风险
4. 单次循环末尾翻转标记值，为下一行切换样式做准备

修改后完整代码 #

<?php
$servername = "";
$username = "";
$password = "";
$dbname = "";

// 创建数据库连接
$conn = mysqli_connect($servername, $username, $password, $dbname);
// 校验连接状态
if (!$conn) {
    die("Connection failed: " . mysqli_connect_error());
}

$sql = "SELECT username, prize, date FROM enter";
$result = mysqli_query($conn, $sql);

if (mysqli_num_rows($result) > 0) {
    // 初始化交替标记：第一行默认使用蓝色样式
    $is_blue_row = true;
    while($row = mysqli_fetch_assoc($result)) {
        // 根据标记选择当前行的样式类
        $current_class = $is_blue_row ? 'hscrB' : 'hscrG';
        // 仅输出单行结构，补全正确闭合的HTML标签，转义输出内容
        echo '<tr class="'.$current_class.'">
            <td>
                <img src="./Charity Contributors_files/ICON.ico" alt="">
                <a class="user-link" target="_blank">'.htmlspecialchars($row["username"]).'</a>
            </td>
        </tr>';
        // 翻转标记，下一行自动切换样式
        $is_blue_row = !$is_blue_row;
    }
} else {
    echo "0 results";
}

mysqli_close($conn);
?>

• 代码中hscrB为原有蓝色样式类、hscrG为原有绿色样式类，和现有CSS样式完全匹配无需额外修改
• 修正了原有代码中HTML标签不闭合、图标路径多余空格的问题，避免渲染异常
• 新增htmlspecialchars()转义逻辑，防止用户名包含特殊字符时破坏页面结构或引发XSS风险

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