Change Background Color on certain condition

[Alexray]

Hi everyone,

I wish to share JavaScript that can help you to highlight some records based on the condition.
 First you need to do for that is to paste the code into the Header:

<script>
const backgroundColor = '#ff000094'
const numberOfColumnForCondition = '5';
const condition = 'High';

document.addEventListener('DataPageReady', function(event) {
let lines = document.querySelectorAll('tr[data-cb-name="data"]');
for (let line of lines) {
  if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition) {
    line.style.backgroundColor = backgroundColor;
  }
}
})
</script>

Also you need to adjust first 3 lines of the code:
 1) const backgroundColor = '#ff000094'
 This constant is used for setting the color of the background.
 2) const numberOfColumnForCondition = '5';
 The number 5 is the number of the column where we are going to check the condition.
 3) const condition = 'High';
 High is the value of our condition.

So, in our example, we are going to highlight fields (rows) where the value in the 5th column equals 'High'.

[WimCasp]

Hi Alexray,

 

It is very nice solution, but it doesn't work in case if my result table have a sticky header with freezed columns. May you check this case and modify your code?

[Alexray]

Hello @WimCasp,

It works with 'Sticky header', but it does not work if you also enable 'Freeze the first'.
When 'Freeze the first' enabled, there is an event listener that removes styles added with that script.

[Scarey]

Fantastic, work well but suppose i want to change only the text color of High, not the background, what could be the code ?

 

tks

[Alexray]

Hi @Scarey,

You just need to change backgroundColor to Color. Try that code:

<script>
const color = '#ff000094'
const numberOfColumnForCondition = '5';
const condition = 'High';

document.addEventListener('DataPageReady', function(event) {
let lines = document.querySelectorAll('tr[data-cb-name="data"]');
for (let line of lines) {
  if (line.querySelector('td:nth-child(' + numberOfColumnForCondition + ')').innerText == condition) {
    line.style.color = color;
  }
}
})
</script>

The color is still red if you need another color, simply change HEX code '#ff000094' to whatever you need.

 

Let me know if it works properly.

[Ashfak1672]

Below is the code written once I came across similar kind of problem. Hope this will help you. You may write it in footer and this will change the color of target cells of result page based on conditions:

 

<script language="javascript" type="text/javascript">
var tbl = document.getElementsByTagName('table')[0];
var rows = tbl.getElementsByTagName('tr');
for (var row=1; row<rows.length;row++)
{
var cels = rows[row].getElementsByTagName('td');

if(cels[2].innerHTML=='P'){
cels[2].style.backgroundColor = '#ABEBC6';
}
else if(cels[2].innerHTML=='M'){
cels[2].style.backgroundColor = '#145A32';
}
else if(cels[2].innerHTML=='C'){
cels[2].style.backgroundColor = '#FDEDEC ';
}

if(cels[6].innerHTML==4){
cels[6].style.backgroundColor = '#D4EFDF';
}
else if(cels[6].innerHTML==3){
cels[6].style.backgroundColor = '#82E0AA';
}
else if(cels[6].innerHTML>4 && cels[6].innerHTML<8){
cels[6].style.backgroundColor = '#F7F386';
}

else if(cels[6].innerHTML>=8){
cels[6].style.backgroundColor = '#E5CA8D';
}

if(cels[13].innerHTML==0){
cels[13].style.backgroundColor = '#ED0F71';
}
else if(cels[13].innerHTML>55){
cels[13].style.backgroundColor = '#F8CFE1';
}

if(cels[21].innerHTML==1){
cels[21].style.backgroundColor = '#D4CBCF';
}

if(cels[23].innerHTML==0){
cels[23].style.backgroundColor = '#D4CBCF';
}

cels[26].style.color='red';
cels[26].style.fontWeight ='bold';

cels[27].style.color='blue';
cels[27].style.fontWeight ='bold';

cels[28].style.color='green';
cels[28].style.fontWeight ='bold';

if(cels[29].innerHTML==1){
cels[29].style.backgroundColor = '#F5B041';
}

if(cels[30].innerHTML>0){
cels[30].style.backgroundColor = '#F1C40F';
}

}
</script>