Coloring the Text Depending on Numeric Value Using CSS

How to change color of text based on text-value by using css?

if you can pass those letters as an attribute to the td element you can do it in CSS like this:

 <td color_code='Your letter'>Your letter</td>

here 'your letter' is the letter that's generated dynamically. Now, simply in CSS, just specify that attribute when calling the td element:

td[color_code='L']{ color: red}

and the same for the rest of the letters.

HTML - Change color of text depending on value with JS

You need to get the textContent of the element to test it's value. And you can use a single class that toggles if it's positive or not. And either use jquery's $.addClass() and $.removeClass() or javascript's classList.add() and classList.remove().

Also as Sujen K. pointed out, you have a tr > div > td for this element, and it should be tr > td > div instead.

var els = document.getElementsByClassName('TransactionAmount');

for (var i = 0; i < els.length; i++) {

  var cell = els[i];

  if (cell.textContent < 0) {

    cell.classList.remove('green')

  } else {

    cell.classList.add('green');

  }

}

.TransactionAmount {

  color: #FF0000;

}

.TransactionAmount.green {

  color: #33FF3C;

}

<table>

  <tr>

    <th>TRANSACTION AMOUNT</th>

    <th>BALANCE AFTER TRANSACTION</th>

    <th>TRANSACTION COMMENT</th>

  </tr>

  <tr>

    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">-1</div></td>

    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>

    <td style="color:white">{{ Transaction.TransactionComment }}</td>

  </tr>

  <tr>

    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">0</div></td>

    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>

    <td style="color:white">{{ Transaction.TransactionComment }}</td>

  </tr>

  <tr>

    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">1</div></td>

    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>

    <td style="color:white">{{ Transaction.TransactionComment }}</td>

  </tr>

</table>

Jquery - Change span text color based on numeric value

Fiddle: http://jsfiddle.net/5zdemo3j/

(change the score in the HTML section and "Run" to see changes)

$(function () {
    // Score Color
    var score = parseInt($('#score').text().trim());
    var color = 'red';
    if (!isNaN(score)) {
        if (score >= 40) {
            color = 'orange';
        }
        if (score >= 60) {
            color = 'green';
        }
        $('#score').css('color', color);
    }
});

How to change color of the number based on the value of the number. (Open to using any of the tags)

Or you can use simple PHP script and inline CSS to change color according to your conditions:

Example (use inside your loop):

<?php
$color = '';
if($row['temperature'] >= 40){
    $color = 'orange';
}
elseif($row['temperature'] >= 60){
    $color = 'green';
}
else{
    $color = 'red'; 
}
echo "<td style='color:".$color."'>" . $row['temperature'] . "</td>";
?>

Important: One more thing, as i mentioned in my comments, in your example id='score' will create issue, because you can only use ID at once, not twice.

Edit:

According to your comment, your conditions will be implemented as like:

<?php
$color = '';
if($row['temperature'] <= 5){ // 5,4,3,2,1,0,-1 .....
    $color = 'red';
}
elseif($row['temperature'] <= 15){ // 6 to 15
    $color = 'orange';
}
elseif($row['temperature'] <= 27){ // 16 to 27
    $color = 'green';
}
elseif($row['temperature'] < 31){ // 27 to 30
    $color = 'orange';
}
else{
    $color = 'red';  // >= 31
}
?>

---

Related Topics