HTML 和 CSS - 根据值更改单元格的文本颜色

Posted 2023-03-06

【中文标题】HTML 和 CSS - 根据值更改单元格的文本颜色

【英文标题】：HTML and CSS - Changing text color of cell depending on value

【发布时间】：2017-08-15 17:50:10

【问题描述】：

抱歉，我没有找到简单的解决方案。我想根据单元格的值更改单元格内的文本颜色。

非常简单的表格：

<table>
  <tbody>
    <tr>
      <td>Quantity</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

我的格式规则：

如果数字是 1 应该是黄色的 如果数字 >1 应该是红色的

我找到了这段代码，但我不能在我的文件中使用它，谢谢

$('#mytable tr td').each(function()

    if($(this).text() > 1)$(this).css('background-color','red');
);

任何人都可以提出解决方案吗？

此外，如果我的表格中有其他数字单元格 喜欢这个：

<table>
  <tbody>
    <tr>
      <td>price</td>
      <td>20</td>
    </tr>
    <tr>
      <td>quantity</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

我可以只为一个单元格应用代码吗？

我必须通过编辑发送订单确认电子邮件的 prestashop mailaltert 模块来进行此更改。

在 mailorder.php 中，我应该在数量所在的单元格中包含更改颜色的条件。

邮件会在new_order.html文件的基础上生成-是邮件模板-，获取mailorder.php生成的数据

我应该把脚本代码放在哪里？ 如果需要，我可以过去文件部分。 谢谢

【参考方案1】：

使用parseFloat 检查该值是否为数字 - 如果是，则根据该值应用样式：

$('#mytable tr td').each(function()
  var cellValue = $(this).html();
  if(!isNaN(parseFloat(cellValue))) 
    if (cellValue > 1) 
      $(this).css('background-color','red');
     else 
      $(this).css('background-color','yellow');
    
  
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td>Quantity</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

【讨论】：

检查是否有 != NaN 什么都不做，因为 NaN 永远不等于 NaN。

【参考方案2】：

试试这个代码，然后根据你的选择改变代码和脚本以及 if 条件。

$('#mytable tr td').each(function()
  var cellValue = $(this).html();
  if(!isNaN(parseFloat(cellValue))) 
    if (cellValue == 1) 
      $(this).css('background-color','red');
     
    
    if(cellValue==2)
     $(this).css('background-color','green');
     
     
         if(cellValue==3)
     $(this).css('background-color','blue');
     
     
              if(cellValue==4)
     $(this).css('background-color','yellow');
     
  
);

table tr td

padding:10px;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" border="1" style="border-collapse:collapse;">
  <tbody>
    <tr>
      <td>Quantity</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>2</td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>3</td>
    </tr>
    <tr>
      <td>Quantity</td>
      <td>2</td>
    </tr>
  </tbody>
</table>