How can I change the background of an element based on a value inside it?

Question

I have a table of numbers - if the number inside the <td> is below a certain number I want to highlight that <td> by making it red by adding a class. My jQuery knowledge is limited but I am pretty sure this is possible to do.

I am using .text() to return the value in the <td>s and .each() to check the numbers one by one.

$(document).ready(function() {

  $(".carpet td").each(function() {
    if ($(this).text() < 5) {
      this.addClass("red")
    }
  });

});

.carpet {
  background-color: aliceblue;
}

.carpet td {
  padding: 12px 20px;
}

.red {
  background-color: #E7295B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="carpet">
  <tbody>
    <tr>
      <td>2</td>
      <td>7</td>
      <td>4</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

`text()` returns a string. So you are doing `string < 5`. And if you review http://www.asciitable.com/, character 0 has a decimal value of 48, so none of your strings are ever going to be less than 5. Use `parseInt()` on the text to turn it into a number. Edit: also the `this` inside the if needs to be in `$()` if you want to use the `addClass()` method. https://jsfiddle.net/9mmqjtk5/12/ — Taplar, Jan 02 '18 at 20:12
.addClass is a jquery function use it with "$(this)" not "this" [more](https://stackoverflow.com/questions/7389944/this-vs-this-in-jquery) — sarthak, Jan 02 '18 at 20:14
@Taplar What does the ASCII table have to do with it? It doesn't use the ASCII value of a character when comparing a string with a number, it parses the string as a number. — Barmar, Jan 02 '18 at 20:22
I forgot coercion was a thing with comparisons. So it looks like the error was probably just the addClass issue. — Taplar, Jan 02 '18 at 20:23

score 1 · Accepted Answer · answered Jan 02 '18 at 20:15

Updated your fiddle. You have to parse the text into a number, and fixed the addClass to be off of a jQuery object.

https://jsfiddle.net/9mmqjtk5/12/

$(document).ready(function() {

  $(".carpet td").each(function() {
    if (parseInt($(this).text(), 10) < 5) {
      $(this).addClass("red")
    }
  });

});

.carpet {
  background-color: aliceblue;
}

.carpet td {
  padding: 12px 20px;
}

.red {
  background-color: #E7295B;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="carpet">
  <tbody>
    <tr>
      <td>2</td>
      <td>7</td>
      <td>4</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>2</td>
      <td>1</td>
      <td>1</td>
    </tr>
  </tbody>
</table>

When you compare a string to a number, it automatically converts the string to a number first. `"5" < 10` returns `true`. — Barmar, Jan 02 '18 at 20:21
It's typical for scripting languages, they try to do "sensible" things when objects of different types are used in expressions. — Barmar, Jan 02 '18 at 20:24

How can I change the background of an element based on a value inside it?

1 Answers1