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

【问题标题】：HTML and CSS - Changing text color of cell depending on valueHTML 和 CSS - 根据值更改单元格的文本颜色
【发布时间】：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生成的数据

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

【问题讨论】：

标签： jquery html css html-table cell

【解决方案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>

【讨论】：