Different row background colours depending on MySQL data

Question

I'm selecting data from mysql into an HTML table and looking for a way to change the css of the depending on that particular row data.

So far I have had the following code:

CSS

    .rowColor {
    background-color: <?php $row_color ?>
}

PHP

if ($row['status'] === "approved") {
    $row_color = "green;";
} else {
    $row_color = "orange;"; 
}

HTML

<tr class="rowColor">
<td>{$row['firstName']}</td>
<td>{$row['lastName']}</td>
<td>{$row['status']}</td>

Currently each row will become orange regardless of what the status datas is.

Welcome to stackoverflow. Did you inspect "view page source"? or inspect code? Also,, try to print $row['status'] values.... looks like straight forward problem... inspecting html generated, and variable values should resolve the issue... — tired and bored dev, Mar 05 '20 at 11:26
@PeterGilbertson `Everything works except my problem` won't help anyone who tries to help you. Your code is not enough for others to understand your problem. Please provide more information. For example, `for-each` loop both in PHP and HTML. — glinda93, Mar 05 '20 at 13:05

score 0 · Answer 1 · answered Mar 05 '20 at 13:06

0

Instead of applying css to <tr>, you can change background-color inside style attribute as below

<tr style="background-color:<?php echo $row['status'] == 'approved' ? 'green' : 'orange'?>;">
<td>{$row['firstName']}</td>
<td>{$row['lastName']}</td>
<td>{$row['status']}</td>

Give it a try

answered Mar 05 '20 at 13:06

akash_poojary

43
4

Just to clarify the is already inside php tags. How would I go about those extra quote marks etc? – Peter Gilbertson Mar 05 '20 at 17:21
In that case you can change it like this '' – akash_poojary Mar 06 '20 at 05:53

score 0 · Answer 2 · answered Mar 05 '20 at 13:16

A better practice is to apply a style class. Using inline CSS is discouraged.

<tr class="<?php echo $row['status'] == 'approved' ? 'status-approved' : 'status-pending'?>;">

css:

tr.status-approved
{
   background-color:green;
}

tr.status-pending
{
   background-color: orange;
}

Different row background colours depending on MySQL data

2 Answers2