猿问

基于变量值的颜色表行

我有一个表,我从数据库中使用 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>


三国纷争
浏览 205回答 3
3回答

汪汪一只猫

您可以使用内联样式。我猜你有成功的第三个状态选项,它将是绿色的。<?phpinclude ('connection.php');$sql = $link->query('SELECT * FROM job');while($data = $sql->fetch_array()) {&nbsp; &nbsp; $color = $data['status'] == "cancel" ? "red" : ($data['status'] == "progress" ? "yellow" : "green");&nbsp; &nbsp; echo '&nbsp; &nbsp; &nbsp; &nbsp; <tr style="background-color:'.$color.'">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>'.$data['id'].'</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>'.$data['number'].'</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>'.$data['date'].'</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>'.$data['device'].'</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>'.$data['model'].'</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>'.$data['problem'].'</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>'.$data['status'].'</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>'.$data['assigned'].'</td>&nbsp; &nbsp; &nbsp; &nbsp;</tr>&nbsp; &nbsp; ';}?>

慕的地10843

一个解决方案是,在你的 css 中编写以下内容:.bg-yellow {&nbsp; &nbsp; background-color: yellow;}而不是在 PHP 中:echo "<table>";if ($data["status"] === ["expected_value"]) {&nbsp; &nbsp; echo "<tr class='bg-yellow'>";&nbsp; &nbsp; echo "<td>" . $data["status"] . "</td>"; // and so on&nbsp; &nbsp; echo "</tr>";} else {&nbsp; &nbsp; echo "<tr>";&nbsp; &nbsp; echo "<td>" . $data["status"] . "</td>"; // and so on&nbsp; &nbsp; echo "</tr>";}echo "</table>";我希望,它有帮助...

呼唤远方

我下面的解决方案很大程度上与之前发布的内容一致。但是,当您想要考虑可访问性时,这样做会让您对语义和颜色对比度有更多的控制。您通常不想像您的示例那样将“黑色”与“深红色”配对。这段代码也更简洁一些。<!DOCTYPE html><html><style>td{&nbsp; &nbsp; &nbsp; &nbsp; padding: 0.5em;}.color-bg-green{&nbsp; &nbsp; &nbsp; &nbsp; background-color: green;}.color-bg-red{&nbsp; &nbsp; &nbsp; &nbsp; background-color: red;}.color-bg-yellow{&nbsp; &nbsp; &nbsp; &nbsp; background-color: yellow;}.color-bg-orange{&nbsp; &nbsp; &nbsp; &nbsp; background-color: orange;}.color-fg-white{&nbsp; &nbsp; &nbsp; &nbsp; color: white;}.color-fg-black{&nbsp; &nbsp; &nbsp; &nbsp; color: black;}</style><body><table><?php$rowData = [];$rowData[] =['id' => 1, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'success', 'assigned' => 'Person A'];$rowData[] =['id' => 2, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'failure', 'assigned' => 'Person B'];$rowData[] =['id' => 3, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'success', 'assigned' => 'Person C'];$rowData[] =['id' => 4, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'pending', 'assigned' => 'Person D'];$rowData[] =['id' => 5, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'processing', 'assigned' => 'Person E'];$rowData[] =['id' => 6, 'number' => 123, 'date' => '2020-01-01', 'device' => 'Smartphone', 'model' => 'Galaxy', 'problem' => 'Lorem ipsum', 'status' => 'success', 'assigned' => 'Person F'];foreach ($rowData as $data){&nbsp; &nbsp; &nbsp; &nbsp; switch ($data['status'])&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'success':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $rowFgColor = 'white';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $rowBgColor = 'green';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'failure':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $rowFgColor = 'black';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $rowBgColor = 'red';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'pending':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $rowFgColor = 'black';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $rowBgColor = 'yellow';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; case 'processing':&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $rowFgColor = 'black';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $rowBgColor = 'orange';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; echo "<tr class=\"color-fg-$rowFgColor color-bg-$rowBgColor\">";&nbsp; &nbsp; &nbsp; &nbsp; foreach (['id', 'number', 'date', 'device', 'model', 'problem', 'status', 'assigned'] as $column)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; echo "<td>{$data[$column]}</td>";&nbsp; &nbsp; &nbsp; &nbsp; echo "</tr>";}?></table></body></html>
随时随地看视频慕课网APP
我要回答