Question 211134 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Conditionally Formatting Cells in APEX IG

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.

Tags:

2

Answers


  1. 0

    I’m not good at JavaScript.

    That’s because you’re comparing strings, so e.g.

    '8' > '5'

    but

    '10' isn't > '5'

    as you’re actually comparing 1 (first digit) to 5, and that’s false.

    You’d get the same if you compared

    '8' > '50'

    (i.e. result would be true, saying yes, 8 is greater than 50).

    • apply Number method to values you’re comparing data cells with, or
    • remove single quotes from your current code so that you’d work with numbers
    Login or Signup to reply.
  2. 0

    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';
  })
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search