Question

如果一个值大于另一个值，我想更改其中一行的背景颜色。

我尝试使用jQuery更改颜色，但它会更改每一行的颜色。

这是我的代码：

while ($row = mysqli_fetch_assoc($result)) {

    echo'<tr>';
    echo'<td>'.$row['id'].'</td>';
    echo'<td style="width:25%"><a href="calendarevent.php?   EventId='.urlencode($row['id']).'">'.$row['date'].'</a></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

在渲染TD之前测试该值，然后将特定类添加到TD，然后使用类

设置TD的样式

<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%"><a href="calendarevent.php?  EventId='.urlencode($row['id']).'">'.$row['date'].'</a></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

如下：

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%"><a href="calendarevent.php?   EventId='.urlencode($row['id']).'">'.$row['date'].'</a></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>';
}

你不需要对jQuery做任何事情，特别是不在表格中

Answer 3

将if语句放在echo之上，然后使用它在tr中创建一个课我无法判断你是否想要整行（tr ）红色或特定单元格（td），因为你提到了两个，但这将调整整行的样式。

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%"><a href="calendarevent.php?   EventId='.urlencode($row['id']).'">'.$row['date'].'</a></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>';

}

然后适当地设置该类：

.bgRed td {
    background-color: red;
}

Answer 4

我没有测试过，但这应该可行：

$('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

这是jQuery的另一种方式 - http://jsfiddle.net/7jm3R/

我为红色背景创建了一个名为redback的类;

$('tr').each(function() {
    var start = parseInt($(this).find('.start').html());
    var finish = parseInt($(this).find('.finish').html());
    if(start < finish) {
        $(this).addClass('redback');
    }
});

更改TD的背景颜色

5 个答案: