Change background color of TD - php

Question

I want to change my background color for one of the rows if one value is bigger than the other.
I tried using jQuery to change the color but it changes the color for every row.
Here is my code:
while ($row = mysqli_fetch_assoc($result)) {
echo'<tr>';
echo'<td>'.$row['id'].'</td>';
echo'<td style="width:25%">'.$row['date'].'</td>';
echo'<td class="starttime">'.$row['start'].'</td>';
echo'<td class="finishtime">'.$row['finish'].'</td>';
echo'<td>'.$row['total'].'</td>';
echo'<td>'.$row['cash'].'</td>';
echo'</tr>';
$start =$row['start'];
$finish = $row['finish'];
if ( $start<$finish ) {
//CHANGE BACK GROUND COLOR FOR finish time to red
}else{
//Keep the color as it was
}
}

Answer 1

Test the value before rendering the TD, then add a specific class to the TD, then style the TD with the class
<style type="text/css">
.redCell {
background-color: red;
}
</style>
<?php
// Loop Through DB Rows
while ($row = mysqli_fetch_assoc($result)) {
echo'<tr>';
echo'<td>'.$row['id'].'</td>';
echo'<td style="width:25%">'.$row['date'].'</td>';
$start =$row['start'];
$finish = $row['finish'];
// Test the value
if ( $start<$finish ) {
$class = "redCell"; // Add a new class to make it red
}else{
$class = ""; // Keep the color as it was
}
echo'<td class="starttime">'.$row['start'].'</td>';
// Add the style to the TD
echo'<td class="finishtime '.$class.'">'.$row['finish'].'</td>';
echo'<td>'.$row['total'].'</td>';
echo'<td>'.$row['cash'].'</td>';
echo'</tr>';
}
?>

Answer 2

Here is yet another way with jQuery - http://jsfiddle.net/7jm3R/
I created a class for the red background called redback;
$('tr').each(function() {
var start = parseInt($(this).find('.start').html());
var finish = parseInt($(this).find('.finish').html());
if(start < finish) {
$(this).addClass('redback');
}
});

Answer 3

What about something like:
while ($row = mysqli_fetch_assoc($result)) {
$style = ''
$start =$row['start'];
$finish = $row['finish'];
if ( $start<$finish ) {
$style = 'style="background-color: red"';
}
echo'<tr>';
echo'<td>'.$row['id'].'</td>';
echo'<td style="width:25%">'.$row['date'].'</td>';
echo'<td class="starttime">'.$row['start'].'</td>';
echo'<td ' . $style . ' class="finishtime">'.$row['finish'].'</td>';
echo'<td>'.$row['total'].'</td>';
echo'<td>'.$row['cash'].'</td>';
echo'</tr>';
}
you do not need to do anything with jQuery, especially NOT within the table

Answer 4

I have not tested, but this should work:
$('tr').each(function() {
var start = $(this).find('.starttime').html(); //assuming this td contains number
var finish = $(this).find('.finishtime').html(); //assuming this td contains number
if(start < finish) $(this).css('background', '#F00');
});

Answer 5

Place your if statement above your echos then use it to create a class in the tr I couldn't tell if you wanted the whole row (tr) red or the specific cell (td) since you mentioned both, but this will style the entire row.
while ($row = mysqli_fetch_assoc($result)) {
$start =$row['start'];
$finish = $row['finish'];
if ( $start<$finish ) {
$bgRed = 'class="bgRed"';
}else{
$bgRed = '';
}
echo'<tr'.$bgRed.'>';
echo'<td>'.$row['id'].'</td>';
echo'<td style="width:25%">'.$row['date'].'</td>';
echo'<td class="starttime">'.$row['start'].'</td>';
echo'<td class="finishtime">'.$row['finish'].'</td>';
echo'<td>'.$row['total'].'</td>';
echo'<td>'.$row['cash'].'</td>';
echo'</tr>';
}
Then style that class appropriately:
.bgRed td {
background-color: red;
}