我有一个表，我从数据库中使用 jquery 获取。我想根据特定列具有的值为每一行着色。例如我有列“状态”。如果该行中的状态为“进度”，我想要黄色行。如果该行中的状态为“取消”，我想要该行为红色我试过一个班级，但整个表格都用这种颜色，我想过使用可变颜色来改变 tr 但不知道如何做到这一点。<style> .yellow { background-color: darkred; } </style><tbody><?phpinclude ('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>
3 回答
汪汪一只猫
TA贡献1898条经验 获得超8个赞
您可以使用内联样式。我猜你有成功的第三个状态选项，它将是绿色的。
<?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>
';
}
?>
慕的地10843
TA贡献1785条经验 获得超8个赞
一个解决方案是，在你的 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>";
我希望，它有帮助...
呼唤远方
TA贡献1856条经验 获得超11个赞
我下面的解决方案很大程度上与之前发布的内容一致。但是，当您想要考虑可访问性时，这样做会让您对语义和颜色对比度有更多的控制。您通常不想像您的示例那样将“黑色”与“深红色”配对。这段代码也更简洁一些。
<!DOCTYPE html>
<html>
<style>
td
{
padding: 0.5em;
}
.color-bg-green
{
background-color: green;
}
.color-bg-red
{
background-color: red;
}
.color-bg-yellow
{
background-color: yellow;
}
.color-bg-orange
{
background-color: orange;
}
.color-fg-white
{
color: white;
}
.color-fg-black
{
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)
{
switch ($data['status'])
{
case 'success':
{
$rowFgColor = 'white';
$rowBgColor = 'green';
}
break;
case 'failure':
{
$rowFgColor = 'black';
$rowBgColor = 'red';
}
break;
case 'pending':
{
$rowFgColor = 'black';
$rowBgColor = 'yellow';
}
break;
default:
case 'processing':
{
$rowFgColor = 'black';
$rowBgColor = 'orange';
}
break;
}
echo "<tr class=\"color-fg-$rowFgColor color-bg-$rowBgColor\">";
foreach (['id', 'number', 'date', 'device', 'model', 'problem', 'status', 'assigned'] as $column)
echo "<td>{$data[$column]}</td>";
echo "</tr>";
}
?>
</table>
</body>
</html>
- 3 回答
- 0 关注
- 204 浏览
添加回答
举报
0/150
提交
取消