数据表：根据数据更改行颜色

Question

I created a database i have a table im calling all rows from datatable and im wanting to set all rows color to situation. For example if situation is "ACTIVE" it should change the color green. else situation='PROCESSING' color ='YELLOW' else situation='NONE' color ='RED'

<table class="table" id="table">
      
    <tr>
        <th>ID</th>
        <th>Company</th>

        <th>Situation</th>
    </tr>


<?php 

$ques = $conn->query("SELECT * FROM company "); 

while ($result = $ques->fetch_assoc()) { 

$id = $result['id'];
$companyname = $result['companyname'];
$situation = $result['situation'];


?>
    
    <tr>
        <td><?php echo $id; ?></td>
            <td><?php echo $companyname; ?></td>
        <td><?php echo $situation; ?></td>
    </tr>

<?php 
} 

?>

</table>







<script>
$(document).ready( function() {
  $('#table').dataTable( {
    "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
      if ( aData['2'] == "NONE" )
      {
        $('td', nRow).css('background-color', 'red' );
      }
      else if ( aData['2'] == "ACTIVE" )
      {
        $('td', nRow).css('background-color', 'green');
      }
      else if ( aData['2'] == "PENDING" )
      {
        $('td', nRow).css('background-color', 'yellow');
      }
      else
      {
        $('td', nRow).css('background-color', 'orange');
      }
    }
  } );
} );
</script>

I m expecting the output should be with color

</div>

Answer 1

In general, the appearance of your page is controlled with CSS. So first think how your html should look so you can apply styles. You might make a style something like:

tr.active {
    color: green;
}

tr.processing {
    color: yellow;
}

or whatever. So table rows with the class 'active' have a foreground color of green, and so forth.

Once we figure our what we want our table markup to look like, it's not too hard to build the php to create that:

<tr class="<?php echo $situation; ?>">

Now each row in the table has a class that tells the browser how to style it.