HTML and CSS - Changing text color of cell depending on value

问题

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

回答1:

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>

回答2:

Try this code, and change the code and script and if conditions according to your choice.

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

来源：https://stackoverflow.com/questions/42971569/html-and-css-changing-text-color-of-cell-depending-on-value

标签

jquery

html

css

html-table

cell