HTML和CSS - 根据值更改单元格的文本颜色 [英] HTML and CSS - Changing text color of cell depending on value

问题描述

对不起，我没有找到简单的解决方案。

非常简单的表格：

<$ p我想在单元格内改变文字颜色。 $ p> <表>
< tbody>
< tr>
< td>数量< / td>
< td> 1< / td>
< / tr>
< / tbody>
< / table>


我的格式化规则：

• 如果number是1应该是黄色


• 如果number> 1应该是红色的





我发现了这段代码，但是我不能在我的文件中使用它，谢谢



  $（'＃mytable tr td'） .each（function（）{
 
 if（$（this）.text（）> 1）$（this）.css（'background-color'，'red'）; 
}）; 
  

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



此外，如果我有我的表与其他数字单元
是这样的：

 < table> 
< tbody> 
< tr> 
< td>价格< / td> 
< td> 20< / td> 
< / tr> 
< tr> 
< td>数量< / td> 
< td> 2< / td> 
< / tr> 
< / tbody> 
< / table> 
  

我可以仅将代码应用于单元吗？





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





在邮购.php我应该包括条件来改变数量的单元格中的颜色。





电子邮件将根据new_order.html文件生成 - 是邮件template-，获取由mailorder.php生成的数据





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

解决方案使用 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>数量< / TD> < TD→1< / TD> < / TR> < TR> < TD>数量< / TD> < TD> 3'; / TD> < / TR> < TR> < TD>数量< / TD> < TD> 2'; / TD> < / TR> < / tbody>< / table>




Sorry i did not find simple solution. I'd like to change text color inside my cell depending on its value.

Very simple table:

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

My formatting rules:

• If number is 1 should be yellow
• If number >1 should be red

I found this code but I cannot use it inside my file, thanks

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

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

Can anyone suggestion a solution?

Further, and if I have my table with other numeric cells like this one:

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

Can I apply code only for a cell?

I have to make this change by editing prestashop mailaltert module that sends the order confirmation email.

In mailorder.php I should include the condition to change color in the cell where the quantity is.

The email will be generated on the basis of new_order.html file -is the mail template-, get the data generated by mailorder.php

Where should I put the script code? I can past file part if is necessary. thanks

解决方案

Use parseFloat to check if the value is a number - and if so then apply the styling based on the value:

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

这篇关于HTML和CSS - 根据值更改单元格的文本颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！