Jump to content

Change Background Color on certain condition


Recommended Posts

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'.
image.thumb.png.dfe1805dd9e994a0238dec9b1cac89d1.png

Link to comment
Share on other sites

  • 1 month later...
  • 1 month later...

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.

Link to comment
Share on other sites

  • 2 weeks later...

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>

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...