Question

我创建了一个数据库，我有一个表，该表调用数据表中的所有行，并希望根据情况设置所有行的颜色。例如如果情况为“活动”，则应将颜色更改为绿色。其他情况=“正在处理”颜色=“黄色” 其他情况='无'颜色='红色'

<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>

我希望输出应该是彩色的

Answer 1

通常，页面的外观由CSS控制。因此，首先考虑您的html外观，以便您可以应用样式。您可以将样式设置为：

tr.active {
    color: green;
}

tr.processing {
    color: yellow;
}

或其他。因此，具有“活动”类的表行的前景色为绿色，依此类推。

一旦确定了我们希望表标记的外观，构建php来创建它就不会太困难：

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

现在表中的每一行都有一个类，该类告诉浏览器如何设置样式。

Answer 2

我已解决了问题感谢您的帮助。我添加了一个这样的脚本，现在可以正常工作了：）

<script>
   $(document).ready(function() {
    $("td:last-child").each(function() {
        if ($(this).text() === "ACTIVE") {
            $(this).parent().addClass("active");
    	}
        else {
            $(this).parent().addClass("passive");
        }
    });
});
    </script>

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

2 个答案: