Color table row based on variable value
Question
I have a table wich i fetch with jquery from a database. I would like to color each row based on one the value that a specific column has. Exemple I have column "status". I want the row yellow if in that row the status is "progress". I want the row red if in that row the status is "cancel"
I have tried with a class but that color the entire table, I thought about using a variable color which will change the tr but not sure how to do that.
<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>
4 answers
solution1
1 ACCPTED 2019-07-18 10:57:24
You could use inline style. I'm guessing that you have a 3rd status option of success, which will be green.
<?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>
';
}
?>
solution2
1 2019-07-18 11:02:18
A solution would be, to write the following in your css:
.bg-yellow {
background-color: yellow;
}
and than in 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>";
I hope, it helps...
solution3
0 2019-07-18 10:59:51
If you set the background color in your Style tag or CSS file it works global but you can use inline css like this here:
<?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>
');
}
?>
or you gave an sepcial class to the row if the status is progress.
This is an example and I hope it helped you a bit.
solution4
0 2019-07-18 11:21:30
My solution below is largely along the lines of what was posted earlier. However, doing it this way will give you a little more control over the semantics and color contrasts, when you want to take accessibility into account. You generally wouldn't want to pair 'black' with 'darkred' as your example seems to do. This code is also a little more concise.
<!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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.