Question

我有一张可以从数据库中用jquery提取的表。我想根据特定列的值为每一行上色。例如，我有“状态”列。如果该行的状态为“进行中”，我希望该行为黄色。如果该行的状态为“取消”，我希望该行为红色

我尝试过一个类，但是整个表都变了颜色，我考虑过使用可变颜色来改变tr，但不确定如何做到这一点。

<style>
        .yellow {
            background-color: darkred;    
        }      
</style>

<tbody>
<?php
include ('connection.php');


$sql = $link->query('SELECT * FROM job');
            while($data = $sql->fetch_array()) {

                    echo '


<tr class="yellow">
                        <td>'.$data['id'].'</td>
                        <td>'.$data['number'].'</td>
                        <td>'.$data['date'].'</td>
                        <td>'.$data['device'].'</td>
                        <td>'.$data['model'].'</td>
                        <td>'.$data['problem'].'</td>
                        <td>'.$data['status'].'</td>


          <td>'.$data['assigned'].'</td>
                </tr>
                ';
            }
        ?>
</tbody>

Answer 1

您可以使用内联样式。我猜您有一个成功的第3个状态选项，该状态为绿色。

<?php
include ('connection.php');
$sql = $link->query('SELECT * FROM job');
while($data = $sql->fetch_array()) {
    $color = $data['status'] == "cancel" ? "red" : ($data['status'] == "progress" ? "yellow" : "green");
    echo '
        <tr style="background-color:'.$color.'">
            <td>'.$data['id'].'</td>
            <td>'.$data['number'].'</td>
            <td>'.$data['date'].'</td>
            <td>'.$data['device'].'</td>
            <td>'.$data['model'].'</td>
            <td>'.$data['problem'].'</td>
            <td>'.$data['status'].'</td>
            <td>'.$data['assigned'].'</td>
       </tr>
    ';
}
?>

Answer 2

一种解决方案是在CSS中编写以下内容：

.bg-yellow {
    background-color: yellow;
}

并且比PHP：

echo "<table>";
if ($data["status"] === ["expected_value"]) {
    echo "<tr class='bg-yellow'>";
    echo "<td>" . $data["status"] . "</td>"; // and so on
    echo "</tr>";
} else {
    echo "<tr>";
    echo "<td>" . $data["status"] . "</td>"; // and so on
    echo "</tr>";
}
echo "</table>";

我希望这会有所帮助...

Answer 3

如果您在样式标签或CSS文件中设置背景色，则可以全局使用，但是您可以在此处使用内嵌CSS，

<?php
    require('connection.php');
    $sql = $link->query('SELECT * FROM job');
    while($data = $sql->fetch_array()) {
        if ($data['status'] == 'cancel') {
            echo('<tr style="background-color:red">');
        }
        else {
            if ($data['status'] == 'progress') {
                echo('<tr style="background-color:yellow">');
            }
            else {
                echo('<tr style="background-color:green">');
            }
        }
        echo('
            <td>'.$data['id'].'</td>
            <td>'.$data['number'].'</td>
            <td>'.$data['date'].'</td>
            <td>'.$data['device'].'</td>
            <td>'.$data['model'].'</td>
            <td>'.$data['problem'].'</td>
            <td>'.$data['status'].'</td>
            <td>'.$data['assigned'].'</td>
        </tr>
        ');
    }
?>

或者如果状态为progress，则为该行提供一个单独的类。

这是一个示例，希望对您有所帮助。

Answer 4

我下面的解决方案大致上与之前发布的内容类似。但是，当您要考虑可访问性时，以这种方式进行操作将使您对语义和颜色对比有更多的控制。您通常不想像您的示例那样将“黑色”与“深色”配对。这段代码也更加简洁。

'compatible'

基于变量值的颜色表行

4 个答案: