html - 基于数据库的html中的css颜色条件

标签 html css angular-ui-bootstrap

我在这里使用了 Bootstrap 。我想用红色标记事件包含“N”的行。在我的数据库中,事件字段有两个字符。他们是Y和N。我在这里也使用了jquery数据表。我能做什么?

<?php
  while($reg_data = mysqli_fetch_array($result_sql2))
         {
         ?>
        <tr class="success">                 
            <td > <?php echo $reg_data['ID'] ?> </td>
            <td> <?php echo $reg_data['Name'] ?> </td>
            <td> <?php echo $reg_data['Email'] ?> </td>
            <td> <?php echo $reg_data['Type'] ?> </td>
            <td> <?php echo $reg_data['Dept'] ?> </td>
            <td> <?php echo $reg_data['Activity'] ?> </td> // based on this field //////

         </tr>

最佳答案

一种最好的快速且简单的方法是提供内联样式:

<td style="background-color: <?php echo ($reg_data['Activity'] == "Y") ? "green": "red" ?>;">
  <?php echo $reg_data['Activity'] ?>
</td>

您可能需要添加!important以防万一需要重写:

<td style="background-color: <?php echo ($reg_data['Activity'] == "Y") ? "green": "red" ?> !important;">

Note: I know inline styles are bad.


更新:抱歉,我错过了您需要在行上执行此操作。您可以在 <tr> 上应用相同的操作而不是<td> 。所以你的代码将是:

<tr class="success" style="background-color: <?php echo ($reg_data['Activity'] == "Y") ? "green": "red" ?>;">                 
    <td > <?php echo $reg_data['ID'] ?> </td>
    <td> <?php echo $reg_data['Name'] ?> </td>
    <td> <?php echo $reg_data['Email'] ?> </td>
    <td> <?php echo $reg_data['Type'] ?> </td>
    <td> <?php echo $reg_data['Dept'] ?> </td>
    <td> <?php echo $reg_data['Activity'] ?> </td>
 </tr>

感谢Darren Sweeney感谢您指出这一点。

关于html - 基于数据库的html中的css颜色条件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41518434/

相关文章:

javascript - 在 Angular-ui-modal 中使用 Angular-ui-bootstrap 日期的奇怪行为

javascript - 如何从特定位置开始播放 HTML 5 视频?

javascript - 使用json和jquery显示类别的多级子类别

CSS条形图溢出,两行而不是一行

javascript - 如何将 html 注入(inject) Angular UI Bootstrap 弹出窗口

angularjs - 使用 Angular ui Bootstrap 时,一个静态选项卡内用于显示第二个选项卡的按钮不起作用

html - 从输入类型日期中删除 'X'(清除按钮)并更改 Firefox 中的字体系列

html - 使用结构化数据设置多个评论的服务详细信息

javascript - 当使用 Javascript 选择链接时,如何隐藏 HTML 元素?

jQuery .on ('click' ) 使用绝对位置时出现问题