<tr>背景色定制问题：如何按订单状态区分表格行样式

制作了一个展示订单数据的表格，设置背景色后所有单元格样式完全一致，希望实现三种订单状态对应的差异化背景样式，但当前效果不符合预期。

问题代码 #

HTML/PHP 代码 #

<?php
$sql = "SELECT enc_id, enc_cmd_num, enc_paye, enc_prepared, enc_ext_ref, enc_heure_fab_deb, enc_type, enc_heure_fab_fin, Client.cli_civilite,Client.cli_nom, Client.cli_prenom FROM Client RIGHT JOIN encaissement ON Client.cli_id = encaissement.enc_client WHERE enc_etat<>4 AND enc_date= '20230104' AND ((DATEDIFF(n,enc_heure_fab_fin, getDate()) < 3 AND enc_prepared <> 0) OR enc_prepared = 0) AND enc_emporte <> 1 ORDER BY encaissement.enc_heure_fab_deb ASC";

$results = odbc_exec( $conn, $sql );
?>
<table>
<?php
while( $row = odbc_fetch_array( $results ) )
{
    // 根据订单状态定义行的样式类
    $rowClass = '';
    if ($row['enc_paye'] == 0) {
        $rowClass = 'attente-reglement';
    } else {
        switch( $row['enc_prepared'] )
        {
            case 0: $rowClass = 'en-preparation'; break;
            case 1: $rowClass = 'commande-prete'; break;
        }
    }
    printf('<tr class="%s">', $rowClass);

    if ( $row["enc_ext_ref"] != '')
    {
        $num_cmd = $row["enc_ext_ref"];
    }
    else
    {
        $num_cmd =$row["enc_cmd_num"];
    }

    // 修复条件判断错误：将赋值=改为比较==
    if ($row['enc_paye'] == 0)
    {
        $etat_cmd='<span class="PRETE">&nbsp&nbsp&nbsp&nbsp&nbspATTENTE REGLEMENT&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></br>';
    }
    else
    {
        switch( $row['enc_prepared'] )
        {
            case 0: $etat_cmd='<span class="ENPREPA">&nbsp&nbsp&nbsp&nbsp&nbspEN PREPARATION&nbsp&nbsp&nbsp</span>'; break;
            case 1: $etat_cmd='<span class="PRETE">&nbsp&nbsp&nbsp&nbsp&nbspCOMMANDE PRETE&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></br>'; break;
        }
    }

    switch( $row['enc_type'] )
    {
        case 0: $commande='<span class="EMPORTER">&nbsp&nbsp<img src="img/emporter.png" id="EMP"></img></span>&nbsp'; break;
        case 1: $commande='<span class="LIVRAISON">&nbsp&nbsp<img src="img/livreur.png" id="LIV"></img></span>&nbsp</br>'; break;
        case 2: $commande='<span class="SURPLACE">&nbsp&nbsp<img src="img/table.png" id="TABLE"></img></span>&nbsp</br>'; break;
    }
    printf('<td>%s</td>',$row["enc_cmd_num"]);
    printf('<td>%s</td>',$etat_cmd);
    printf('<td>%s</td>',$commande);

}
?>
</table>
</body>
</html>

CSS 代码 #

/*FONTS*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@1,300&display=swap');

.ENPREPA{
    font-size: 30px;
    font-weight: bold;
    font-family: 'Montserrat';
    color: #FF8C01;
}

.PRETE{
    font-size: 30px;
    font-weight: bold;
    font-family: 'Montserrat';
    color:#05750D;
    animation-duration: .8s;
    animation-name: clignoter;
    animation-iteration-count: infinite;
    transition: none;
}

@keyframes clignoter {
  0%   { color:#000000; }
  40%   {color:#F1A200; }
  100% { opacity:#000000; }
}

li{
  color: #EB0000;
  font-family: 'Montserrat';
  font-weight: bold;
  font-size: 30px;
  text-align: left;
  list-style-type: none;
  margin-left: 20px;
}

.ATTENTE{
    font-size: 30px;
    font-weight: bold;
    color: red;
    font-family: 'Montserrat';
}

.PAYE{
    font-size: 30px;
    font-weight: bold;
    color: #11C306;
    font-family: 'Montserrat';
}

#time{
    color: white;
    font-family: 'Montserrat';
    font-size: 25px;
    font-weight: bold;
}

table{
    float: left;
}

tr{
    color: red;
    font-size: 25px;
    font-family: 'Montserrat';
    font-weight: bold;
}

.SURPLACE{
    color: red;
    font-family: 'Montserrat';
    font-weight: bold;
    font-size: 25px;
}

#TABLE{
width : 100px;
height : 70px;
}

/* 移除统一背景色，保留通用样式 */
td{
    border-radius: 13px;
    padding: 10px; /* 可选：增加内边距优化显示 */
}

/* 三种订单状态的背景色设置，可根据需求调整颜色 */
tr.attente-reglement td {
    background-color: #ff4444; /* 待付款状态背景色 */
}

tr.en-preparation td {
    background-color: #ffaa00; /* 准备中状态背景色 */
}

tr.commande-prete td {
    background-color: #44dd44; /* 已准备状态背景色 */
}

#EMP{
width : 70px;
height : 70px;
}

#LIV{
width : 70px;
height : 70px;
}

关键修改说明 #

1. 修复逻辑错误：原代码中if ($row['enc_paye'] = 0)是赋值操作，改为==才是正确的相等判断，否则所有订单都会被错误判定为待付款状态。
2. 添加状态类标识：根据订单的付款/准备状态，给每一行<tr>添加对应的样式类，为差异化样式提供选择器依据。
3. 实现差异化背景：移除td的统一背景色设置，改为针对不同状态类的行下单元格设置专属背景色，达成按订单状态区分样式的效果。

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