Conditionally Formatting Cells in APEX IG

Question

I'm currently trying to conditionally format individual cells for an IG inside of an Oracle Apex application. To accomplish this I added the following JavaScript function to the "Function and Global Variable Declaration" section of the page settings:

function highlight_ig_cells() {
  $('.highlight td.status_column').each(function() {
    cellData = $(this).text();
    if (cellData <= '50.0')
      this.style.backgroundColor = 'lightsalmon';
    else if (cellData > '50.0' && cellData < '85.0')
      this.style.backgroundColor = 'lightgoldenrodyellow';
    else if (cellData >= '85.0')
      this.style.backgroundColor = 'lightgreen';
  })
};

This function is called when the page loads and again during a dynamic action so that it will be called when the IG is refreshed. Currently it works almost perfectly except I have a value in the table that is 100 and the color is lightsalmon as if 100 were less than 50. Other values between 50 and 85 are showing yellow as intended but not 100. Any assistance with this would be much appreciated.

Answer 1

Use parseFloat and compare as numbers (not strings):

function highlight_ig_cells() {
  $('.highlight td.status_column').each(function() {
    cellData = parseFloat($(this).text());
    if (cellData <= 50.0)
      this.style.backgroundColor = 'lightsalmon';
    else if (cellData > 50.0 && cellData < 85.0)
      this.style.backgroundColor = 'lightgoldenrodyellow';
    else if (cellData >= 85.0)
      this.style.backgroundColor = 'lightgreen';
  })
};