0

I'm creating a stocks widget. If a value in the Change or Changeinpercent columns changes, I want to be able to set the font color to red for (-) a decrease or green for (+) and increase in value.

Here is what I've got so far: http://jsfiddle.net/thetuneupguy/r2Bca/

$(function() {
    $.getJSON('http://query.yahooapis.com/v1/public/yql?q=SELECT%20*%20FROM%20yahoo.finance.quotes%20WHERE%20symbol%20in(%22GCF14.CMX%22%2C%22SIF14.CMX%22%2C%22PAH14.NYM%22%2C%22PLF14.NYM%22)&format=json&diagnostics=true&env=store%3A%2F%2Fdatatables.org%2Falltableswithkeys&callback=', function(data) {
    console.log("data: ", data);
    console.log(data.query.results.quote);
    $.each(data.query.results.quote, function(key, obj){
        var $tr = $('<tr/>', {'class': 'my-new-list'}).appendTo('#blk-1 table');            
        $tr.append($('<td/>').text(obj.Name || "--"));
        $tr.append($('<td/>').text(obj.Ask || "--"));
        $tr.append($('<td/>').text(obj.Bid || "--"));
        $tr.append($('<td/>').text(obj.Change || "--"));
        $tr.append($('<td/>').text(obj.ChangeinPercent || "--"));
        });

    });
});
3
  • Hi! I answered your prev question. Working on this one :) Jan 12, 2014 at 22:27
  • 1
    I don't see any effort to set the font colour here. Jan 12, 2014 at 22:32
  • @Markasoftware: Putting the whole page contents in a PNG and transmitting it in one piece to the user's browser "works"; doesn't mean it's a good idea. Jan 12, 2014 at 22:37

2 Answers 2

2

First, add these 2 css rules:

.increase{
    color:green;    
}
.decrease{
    color:red;
}

Then, Instead of:

$tr.append($('<td/>').text(obj.ChangeinPercent || "--"));

You should do:

var $td = $('<td/>').text(obj.ChangeinPercent || "--");    
if(/^\+/.test(obj.ChangeinPercent || '')) $td.addClass("increase");  //If it starts with '+', make it green    
if(/^-/.test(obj.ChangeinPercent || '')) $td.addClass("decrease");  //If it starts with '-', make it red
$tr.append($td);

Demo here: http://jsfiddle.net/edgarinvillegas/r2Bca/3/

8
  • More like it. Why not use numeric comparison instead of regex, though? Jan 12, 2014 at 22:36
  • Because it's a string, it even has a '%' character Jan 12, 2014 at 22:37
  • Strings convert to numbers when the parsing succeeds. I suppose the presence of a % does ruin that, though. Jan 12, 2014 at 22:38
  • Yep, and as the field is a string, we don't know what could come there... better not to take risks Jan 12, 2014 at 22:39
  • That was kind of my point. You'd use Javascript's parsing facility to sort that out for us. If the input weren't a valid number, then we could handle that somehow. Right now you're just sort of praying and hoping that the first character is - or + and that everything's okay Jan 12, 2014 at 22:41
0
// Assuming the values will have always a + or -
(obj.Change.substr(0,1) == '+') ? changeClass = 'green' : changeClass = 'red';
(obj.Change.substr(0,1) == '+') ? changeInPercentClass = 'green' : changeInPercentClass = 'red';

$tr.append($('<td class="'+changeClass+'">').text(obj.Change || "--"));
$tr.append($('<td class="'+changeInPercentClass+'">').text(obj.ChangeinPercent || "--"));

I updated the Fiddle

http://jsfiddle.net/r2Bca/4/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.