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

【问题标题】：Datatable: changing row color based on the data数据表：根据数据更改行颜色
【发布时间】：2019-04-28 23:27:51
【问题描述】：

我创建了一个数据库，我有一个表，我正在调用数据表中的所有行，并且我想将所有行的颜色设置为情况。例如如果情况为“活动”，则应将颜色更改为绿色。其他情况='PROCESSING' 颜色='YELLOW' 其他情况='NONE' 颜色 ='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>

我希望输出应该是彩色的

【问题讨论】：

您可以尝试的一件事是使用浏览器的调试器（F12，然后是 Firefox 的调试器选项卡）在 ready 函数中的第一个设置断点。然后在断点命中时单步执行代码，将变量悬停以查看值包含的内容。

标签： php mysql database datatable

【解决方案1】：

通常，您的网页外观由 CSS 控制。所以首先想想你的 html 应该是什么样子，这样你就可以应用样式。您可能会制作类似以下的样式：

tr.active {
    color: green;
}

tr.processing {
    color: yellow;
}

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

一旦我们确定了我们希望表格标记的样子，构建 php 来创建它就不是太难了：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：