Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Posted by Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Adding certain classes to <td> based on <td>'s numeric value.

So I have a table and I'd like to add a class based on the value of the data cell.

I've hacked together something that should show what I after, despite it not working at all. I am not getting any error messages in the console but nothing is being changed in the table.

I'm just trying to iterate over my $tdArray and add the appropriate class.

var $tdArray = $("#archive td:nth-child(10)");

for(var i = 0; i < $tdArray.length; i++){
    if ($tdArray[i] > 0){
        $(this).addClass("positive");
    }else if ($tdArray[i] < 0) {
       $(this).addClass("negative");
    }
}

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Lukasz,

I'm assuming here that you have a table where the 10th column contains these numbers.

I would use the .each method to iterate over each td element. Then you can get the text of each td, convert to a number, then run through your conditions.

$("#archive td:nth-child(10)").each(function(){
  value = parseInt($(this).text(), 10);
  if (value > 0) {
    $(this).addClass("positive");
  }
  if (value < 0) {
    $(this).addClass("negative");
  }
});

I did a codepen demo demonstrating it. Let me know if I've misinterpreted the requirements.

http://codepen.io/anon/pen/dzios

Is the situation such that you will never get a 0 value or do you simply not want to do anything if it's a zero value? The code can be simplified a little if you know you'll never have a zero value.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Sorry, I assumed integers here. Use parseFloat if you have decimal numbers.

Edit: parseFloat($(this).text()) There's no radix argument

Łukasz Czuliński
Łukasz Czuliński
8,646 Points
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

That is exactly what I'm after. Thanks so much.

What is the second argument in parseInt()? That is the only part I don't follow. The 10.

value = parseInt($(this).text(), 10);
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

You're welcome.

See this mdn page for more info: parseInt()

The second argument is the radix or base that you want the string interpreted as. So here I'm specifying that the string should be interpreted as base 10. You could pass in 16 and it would be interpreted as a hexadecimal number for example.

That mdn page recommends that you always specify a radix rather than depend on default values if you leave it off.

Keep in mind that if you have strings with a decimal point like "34.56" Then you will lose the .56 when using parseInt. You'll want to use parseFloat() instead.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I edited my comment above because I incorrectly described the radix argument. The radix argument is how the string is interpreted. The result returned is always a base 10 integer.