jquery conditional formating on negative number value

Question

I was able to find a few examples and pieced things together to get this working.

$(".status").filter(function () {
    return (/\(\)/).test($(this).html());
})
    .closest(\'td\').css(\'background-color\', \'red\');
});

However, I need to take this further and evaluate the negative value for a scalable conditional format.

if value of td is positive backgrond-color should be green. if value of td is negative which is representied in parantheses (###,###) then I want to evaluate based on these conditions.

(1) thru (199,999) =  .closest('td').css('background-color', 'yellow');

(200,000) or greater = .closest('td').css('background-color', 'red');

Why are you escaping all the quotes?

Barmar
– Barmar

2013-09-25 19:40:31 +00:00
Commented Sep 25, 2013 at 19:40 — Barmar
– Barmar, Commented Sep 25, 2013 at 19:40
the escaped quotes came out of an echo from PHP.

wildwally
– wildwally

2013-09-25 20:52:04 +00:00
Commented Sep 25, 2013 at 20:52 — wildwally
– wildwally, Commented Sep 25, 2013 at 20:52

Jason P · Accepted Answer · 2013-09-25 19:38:08Z

1

.css() accepts a function as the value parameter.

Here's one possible solution:

http://jsfiddle.net/JUJBj/

$(".status").filter(function () {
    return (/\(.+\)/).test($(this).html());
}).closest('td').css('background-color', function() {
    var val = parseInt($(this).find('.status').text().replace(/\(|\)/g, ''), 10);
    return val >= 200000 ? 'red' : 'yellow';
});

answered Sep 25, 2013 at 19:38

Jason P

27k3 gold badges34 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

wildwally Over a year ago

I'm marking this as the accepted, but have a question. Your example works with the <span> included, why is it that when the <span> is removed and class assigned to the <td> it only assigns yellow?

Jason P Over a year ago

It's because of the $(this).find('.status') part. this is the td, and after your change, doesn't have a descendant with the class status, so the whole thing fails. Yellow is just the default. Here's an updated fiddle: jsfiddle.net/ttaA2

Collectives™ on Stack Overflow

jquery conditional formating on negative number value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related