Alexray Posted January 5 Report Share Posted January 5 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'. Meekeee 1 Quote Link to comment Share on other sites More sharing options...
WimCasp Posted January 6 Report Share Posted January 6 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? Quote Link to comment Share on other sites More sharing options...
Alexray Posted February 8 Author Report Share Posted February 8 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. Quote Link to comment Share on other sites More sharing options...
Scarey Posted March 24 Report Share Posted March 24 Fantastic, work well but suppose i want to change only the text color of High, not the background, what could be the code ? tks Quote Link to comment Share on other sites More sharing options...
Alexray Posted March 25 Author Report Share Posted March 25 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. Quote Link to comment Share on other sites More sharing options...
Ashfak1672 Posted April 4 Report Share Posted April 4 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> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.