Question

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

非常简单的表格：

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

我的格式规则：

如果数字为1则应为黄色
如果数字＆gt; 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生成的数据

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

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

Answer 2

尝试此代码，并根据您的选择更改代码和脚本以及条件。

＆＃13;

$('#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');
     }
  }
});

＆＃13;

table tr td
{
padding:10px;
}

＆＃13;

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

＆＃13;

HTML和CSS - 根据值

2 个答案: