如何用PHP/CSS根据商品状态高亮表格行？

有两种常见的实现方式，按需选择即可：

方式一：直接内联样式判断 #

直接在<tr>标签里根据商品状态动态生成背景色样式，适合快速实现的场景：

if(mysqli_num_rows($query_run) > 0)
{
    foreach($query_run as $items)
    {
        // 根据status字段值设置背景样式
        $bgStyle = '';
        // 这里假设status值是'可用'/'不可用'，如果是数字（比如1=可用/0=不可用），修改判断条件即可
        if($items['status'] == '可用'){
            $bgStyle = 'style="background-color: #d4edda;"'; // 淡绿色，视觉更舒适
        } elseif($items['status'] == '不可用'){
            $bgStyle = 'style="background-color: #f8d7da;"'; // 淡红色
        }
        ?>
        <tr <?= $bgStyle; ?>>
            <td><?= $items['id']; ?></td>
            <td><?= $items['name']; ?></td>
            <td><?= $items['type']; ?></td> 
            <td><?= $items['status']; ?></td>
        </tr>
        <?php
    }
}
else
{
    ?>
        <tr>
            <td colspan="4">No results</td>
        </tr>
    <?php
}

方式二：使用CSS类（推荐，便于维护） #

先定义统一的CSS样式，再根据状态给表格行添加对应类，后续要修改样式时只需调整CSS即可：

首先在页面头部添加CSS样式：

<style>
    .row-available { background-color: #d4edda; }
    .row-unavailable { background-color: #f8d7da; }
</style>

然后修改PHP代码中的表格行部分：

if(mysqli_num_rows($query_run) > 0)
{
    foreach($query_run as $items)
    {
        $rowClass = '';
        if($items['status'] == '可用'){
            $rowClass = 'row-available';
        } elseif($items['status'] == '不可用'){
            $rowClass = 'row-unavailable';
        }
        ?>
        <tr class="<?= $rowClass; ?>">
            <td><?= $items['id']; ?></td>
            <td><?= $items['name']; ?></td>
            <td><?= $items['type']; ?></td> 
            <td><?= $items['status']; ?></td>
        </tr>
        <?php
    }
}
else
{
    ?>
        <tr>
            <td colspan="4">No results</td>
        </tr>
    <?php
}

注意事项 #

• 上面的判断条件要和你数据库中status字段的实际值对应，如果是数字标识（比如1=可用、0=不可用），直接把判断语句改成$items['status'] == 1即可。

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