Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Ł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

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.

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

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);

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.

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.