David
David

Reputation: 51

Echo Value Reflect Respective Color font

I would like to know if it's possible to echo a variable and depending on its content will change the respective color of the value? This is different from setting a fix color to the echo'ed value.

For example below:

<th>Status</th>
<td><?php echo $row['status']; ?></td>

Status content in DB can be:

So when the echo'ed value is "High", the font color reflected in the table should be red. If "Med", the font color should be orange. If "Low", the font color should be blue.

If possible, how can it be achieved? Thanks guys!

Upvotes: 0

Views: 170

Answers (3)

Jason
Jason

Reputation: 15335

How about with a simple css style?

The css

<style>
    .High { color: red; }
    .Med { color: orange; }
    .Low { color: blue; }
</style>

Then your HTML/PHP

<th>Status</th>
<td class="<?php echo $row['status']; ?>"><?php echo $row['status']; ?></td>

OR (same results)

<?php
    $thisStatus = $row['status'];

    echo '<th>Status</th>';
    echo '<td class="' . $thisStatus . '">' . $thisStatus . '</td>';
?>

Upvotes: 3

Don&#39;t Panic
Don&#39;t Panic

Reputation: 41810

One way to do it is to use the status value to assign a CSS class to the element containing it.

<td class="status-<?php echo strtolower($row['status']); ?>">
    <?php echo $row['status']; ?>
</td>

Then in your stylesheet you can define the possible classes with the colors you want them to have.

.status-high {
    color: red;
}
/* etc. */

Upvotes: 2

Ulrik McArdle
Ulrik McArdle

Reputation: 654

Maybe something like this (not tested):

<?php
    function color($status){
        switch($status){
            case 'High':
                return 'style="color: red;"';
            break;
            case 'Med':
                return 'style="color: orange;"';
            break;
            case 'Low':
                return 'style="color: blue;"';
            break;
        }
    }
?>


<th>Status</th>
<td <?php echo color($row['status']); ?>><?php echo $row['status']; ?></td>

Upvotes: 0

Related Questions