CODEWITHSUNDEEP
jqueryhtmlcss
jonmrich
jonmrich

Reputation: 4323

Style number in div based on the number's value

I have a number of rows in a table like this:

<tr>
    <td class="lang_body_2">Upper Management</td>
    <td class="lang_body_2">3.00%</td>
    <td class="lang_body_2">3.40%</td>
    <td class="lang_body_2 index_num">88</td>
</tr>

What I'd like to do is style that last cell (the one with "88") based on the value of that cell. That is, if the number (in this case 88) is greater than 50, then change the color of the value (again, 88) to something.

I tried this, but it didn't work:

$(document).ready(function () {
    if ($(".index_num").val() == 88) {
        $( this ).css( "color", "red" )
    }
});

I'm going to have a bunch of logical statements eventually to define the colors, but I wanted to just get it working on one first before trying a bunch of other things. For example, if the value in the cell is greater than 100 then XYZ, if it's greater than 50 && less than 100, then ZYX (and so on). For now, I'd be happy with just one cell being correct.

Additionally, if I have a number of cells with this same class (.index_num) will they each be able to have a color defined or will it only change to one color based on the cell the script finds first? Obviously, I'd need the first thing.

Any help would be appreciated.

Upvotes: 0

Views: 606

Answers (3)

PTD
PTD

Reputation: 1043

jquery .each() will help you loop through all your elements with a specific class. I tried something like this.

$(document).ready(function () {
    $(".index_num").each(function() {
        var score = $(this).text();
        if (score < 50)
        {
            $(this).css("color", "red");    
        }
        else if (score >= 50 && score < 100)
        {
            $(this).css("color", "orange");    
        }
        else
        {
            $(this).css("color", "green");    
        }
    });
});

See JS Fiddle

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128791

jQuery's val() method is used for form elements like input, textarea and select. What you want to use instead is text(), which you'd possibly then want to convert to a number (which I've done below using the Unary Plus (+) operator) - this would allow you to use > and < to check if the value is between a certain range, however there's no need for that if you're only comparing against one value:

if (+$(".index_num").text() == 88)

Furthermore, this will not relate to your .index_num element in a simple if statement. Assuming you only have one .index_num element, you can instead use:

if (+$(".index_num").text() == 88) {
    $(".index_num").css( "color", "red" )
}

$(".index_num").each(function() {
    if (+$(this).text() == 88) {
        $(this).css( "color", "red" )
    }
});

Upvotes: 3

Alessandro Marchisio
Alessandro Marchisio

Reputation: 545

try this

$(document).ready(function () {
    $(".index_num").each(function(){
        if (  $( this ).text() == "88" )
            $( this ).css( "color", "red" )
    })
});

note "88" with quotes or use 

if ( parseInt( $(this).val(),10 ) == 88 )

http://jsfiddle.net/alemarch/cr1v8mLa/

Upvotes: 1

Related Questions