CSS/PHP: Change font color based on value retrieve from MySQL

Question

I have some problem with my code. Currently, I have a column in the database called "Book_status". there are 3 conditions which are Pending, Approved and Reject.

I want the font to change its color at PHP based on that condition. For example, Pending will change the font to Yellow, Approved to Green and Reject to Red.

Below is my current PHP code:

echo "<tr>";
        echo "<td>" . $row['id'] . "</td>";
        echo "<td>" . $row['Requested_by'] . "</td>";                                              
        echo "<td>" . $row['Fac_ID'] . "</td>";
        echo "<td>" . $row['Room_Desc'] . "</td>";
        echo "<td>" . $row['Meeting_Description'] . "</td>";    
        echo "<td>" . $row['Book_Status'] . " </td>";      
        echo "<td><a type='button' class='btn btn-primary btn sm'href='view.php?id=". $row['id'] ."' title='Edit Booking' data-toggle='tooltip'>View</a></td>";
echo "</tr>";

What have you tried so far? What is the problem? Is it the HTML you need to generate, is it the PHP code? You can probably do better than letting someone else write the code for you. — KIKO Software, Aug 05 '19 at 06:50

score 2 · Answer 1 · answered Aug 05 '19 at 06:59

Simply name some CSS classes the same as the status values and assign as a style to the table row

<style>
    .pending td{color:yellow;}
    .approved td{color:green}
    .reject td{color:red}
</style>

Then, in the PHP/HTML:

    $class=strtolower( $row['Book_Status'] );

    echo "<tr class='$class'>";
    echo "<td>" . $row['id'] . "</td>";
    echo "<td>" . $row['Requested_by'] . "</td>";                                              
    echo "<td>" . $row['Fac_ID'] . "</td>";
    echo "<td>" . $row['Room_Desc'] . "</td>";
    echo "<td>" . $row['Meeting_Description'] . "</td>";    
    echo "<td>" . $row['Book_Status'] . " </td>";      
    echo "<td><a type='button' class='btn btn-primary btn sm'href='view.php?id=". $row['id'] ."' title='Edit Booking' data-toggle='tooltip'>View</a></td>";
    echo "</tr>";

score 1 · Answer 2 · answered Aug 05 '19 at 06:56

This is somehow similar to this

but instead of passing a number pass the status

function statusColor($status)
{
    if ($status == 'Pending')
        return 'is-pending';
    else if ($status == 'Approved')
        return = 'is-approved';
    else if ($status == 'Rejected')
        return = 'is-rejected';
}

and for the html something like this

<tr class="<?=statusColor('Pending');?>">...</tr>

I always used class instead of inline css

.is-pending {
  color: yellow;
}
.is-approved {
  color: green;
}
.is-rejected {
  color: red;
}

score 1 · Accepted Answer · answered Aug 05 '19 at 07:00

This will work

<?php
$status=$row['Book_Status'];
if($status=="Approved")
{
    $color="color:green";
}
else if($status=="Pending")
{
    $color="color:yellow";
}
else 
{
    $color="color:red";
}
 echo "<table><tr><td></td><td></td><td></td><td></td><td></td><td style='$color'>".$status ."</td></tr></table>";  

?>

score 0 · Answer 4 · answered Aug 05 '19 at 07:03

There are two approaches to achieve this using the ternary operator. This method will allow you to only have custom colours for the Book Status table cell. You may also use it on the tr to style the entire row by applying it to the <tr> element.

Conditionally appending a class: <td class="<?php echo is_rejected ? 'rejected' : is_pending ? 'pending' : 'approved'; ?>">. Then write those classes in CSS with the precise styles that you desire.

OR

You could directly use the inline ...style="color:red" attribute using the method described in the previous step.

Source: How to apply style classes to td classes?

CSS/PHP: Change font color based on value retrieve from MySQL

4 Answers4