user11473793
user11473793

Reputation:

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

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>";

Upvotes: 0

Views: 3362

Answers (4)

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.

  1. 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

  1. 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?

Upvotes: 0

Zendie
Zendie

Reputation: 1174

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>";  

?>

Upvotes: 1

Professor Abronsius
Professor Abronsius

Reputation: 33823

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>";

Upvotes: 2

Yor
Yor

Reputation: 182

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;
}

Upvotes: 1

Related Questions