Background color of calculated fields

[SteveMott]

I have some code that changes the background of a cell in the PRR column conditional on the value it contains:

The code is:

HEADER

<style>

h2 { color: blue; }

td:nth-child(7)> span{

color: #ffffff;

padding: 4px 8px;

border: none;

border-radius: 3px;

width: 100px;

display: block;

text-align: center;

font-size: 14px;

font-weight: bold;

}

</style>

Where td:nth-child(7) is the position of the field to test.

 ---

FOOTER

<script>

document.addEventListener('DataPageReady', styleHandler);

function styleHandler(event) {

  const customizedField = document.querySelectorAll('td:nth-child(7) > span');

  customizedField.forEach(element => {

    if (element.innerHTML > 0 && element.innerHTML < 0.334) {

      element.style.backgroundColor="#09be13";

    }

    else if(element.innerHTML >= 0.334 && element.innerHTML < 0.501){

      element.style.backgroundColor="#8c2ab2";

    }

    else if(element.innerHTML >= 0.501 && element.innerHTML < 0.801){

      element.style.backgroundColor="#033bf3";

    }

    else if(element.innerHTML >=0.801 && element.innerHTML < 1.260){

      element.style.backgroundColor="#758d8d";

    }

    else if(element.innerHTML >=1.260 && element.innerHTML < 2.501){

      element.style.backgroundColor="#f7ff14";

      element.style.color="#20282B";

    }

    else if(element.innerHTML >=2.501 && element.innerHTML < 4.01){

      element.style.backgroundColor="#f7bb00";

      element.style.color="#20282B";

    }

    else if(element.innerHTML > 4){

      element.style.backgroundColor="#f83301";

    }

    });

  };

</script>

 

FIELD 7 (the cell to color)

<span>[@field:FullReactionIngredients_PRR#]</span>

---

 

All this is fine. However I now need to do the same for a calculated value field:

Field 3 here is the value based on a parameter passed to the table through the URL:

CASE

WHEN (SELECT COUNT(DrugReactionID) FROM FullReactionIngredients WHERE DrugReactionID = '[@calcfield:3]') = 1

THEN

(SELECT CONVERT(VARCHAR, (PRR))

FROM FullReactionIngredients

WHERE DrugReactionID = '[@calcfield:3]' )

ELSE ' '

END

The value is calculated correctly and I have the same coloring code as shown above but with the value changed to td:nth-child(3).

So my question is; how can I get the CSS to work on a calculated field?

Thanks,

Steve

[Kronos]

Hi @SteveMott, maybe this similar forum thread can help you

 

[SteveMott]

Hi Kronos

Thank you, that is very helpful.

Steve