Format table row based on value

Question

Im would like to style a table row based on the value in the first cell.

order_status has 3 options. 'Done' 'Optie' 'Def'

// output data of each row
            while($row = $result->fetch_assoc()) 
                 { 
                        echo "<tr>"; 
                        echo "<td>" . $row['order_status'] . "</td>"; 
                        echo "<td>" . $row['planning'] . "</td>";
                        echo "<td>" . $row['order_name'] . "</td>";
                        echo "<td>" . $row['order_number'] . "</td>";
                        echo "<td>" . $row['order_pl'] . "</td>";
                        echo "<td>" . $row['order_date_in'] . "</td>";
                        echo "<td>" . $row['order_date_out'] . "</td>";
                        echo "<td>" . $row['order_location'] . "</td>";
                        echo "<td>" . $row['order_customer'] . "</td>";
                        echo "<td>" . $row['order_contact'] . "</td>";
                        echo "<td>" . $row['order_content'] . "</td>";
                      echo "</tr>"; 
                      } 
                    echo "</table>"; 

Answer 1

If you add a class to the row you can easily do this by updating your CSS file.

PHP

Update your PHP to look like this:

// output data of each row
while($row = $result->fetch_assoc()) { 
    echo "<tr class=\"order_status_{$row['order_status']}\"> 
        <td> {$row['order_status']} </td>
        <td> {$row['planning']} </td>
        <td> {$row['order_name']} </td>
        <td> {$row['order_number']} </td>
        <td> {$row['order_pl']} </td>
        <td> {$row['order_date_in']} </td>
        <td> {$row['order_date_out']} </td>
        <td> {$row['order_location']} </td>
        <td> {$row['order_customer']} </td>
        <td> {$row['order_contact']} </td>
        <td> {$row['order_content']} </td>
    </tr> ";
} 
echo "</table>";

The following line...

class=\"order_status_{$row['order_status']}\"#

Will give class names in the format of order_status_* ; for example:

order_Status_confirmed
order_Status_received

CSS

Then you can add something similar to the following to your CSS and control exactly how it looks.

.order_status_pending{
    background: #faa;
}
.order_status_confirmed{
    background: #afa;
}