I want to change the background color of the cell in the tabular report conditionally with javascript

[Mushigee2266]

I am using following code. This code it changing the background of the text perfectly. But I want to change the background color of the cells of the column with the same conditions which are in the code. I have tried different method but unsuccefull. Is there any solution 

 

<div id="mydiv_[@field:Test_ID]"></div>
<script>
    var percentageSupport = parseFloat("[@field:Score2#]");
    var maxScore = parseFloat('[@calcfield:2#]');
    var second = parseFloat('[@calcfield:6#]');
    var third = parseFloat('[@calcfield:7#]');
    var fourth = parseFloat('[@calcfield:8#]');
    var fifth = parseFloat('[@calcfield:9#]');
var sixth = parseFloat('[@calcfield:10#]');
var seven = parseFloat('[@calcfield:11#]');
var eight = parseFloat('[@calcfield:12#]');
var nine = parseFloat('[@calcfield:13#]');
var ten = parseFloat('[@calcfield:14#]');

    if (percentageSupport >= second){
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:#006400;font-weight: bold; height: 40px; display: flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 

else if (percentageSupport >=third ) {
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:#228B22;font-weight: bold; height: 40px; display: flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 

else if (percentageSupport >= fourth 
) {
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:#808000;font-weight: bold; height: 40px; display: flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 
else if (percentageSupport >= fifth 
) {
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:#556B2F;font-weight: bold; height: 40px; display: flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 
else if (percentageSupport >= sixth 
) {
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:#BDB76B;font-weight: bold; height: 40px; display: flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 
else if (percentageSupport >= seven 
) {
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:#8B4513;font-weight: bold; height: 40px;display:flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 
else if (percentageSupport >= eight 
) {
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:#B22222;font-weight: bold; height: 40px;display:flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 
else if (percentageSupport >= nine 
) {
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:#8B0000;font-weight: bold; height: 40px;display:flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 

else {
        document.getElementById("mydiv_[@field:Test_ID]").innerHTML = "<div style='background-color:red;font-weight: bold; height: 40px; display:flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    }
</script>

[Volomeister]

Hello @Mushigee2266

So you are saying that when you add 'background-color:color;' inline style it does not change the background color of the div element?
Can you share a link to the DataPage to demonstrate that? 
 

[Mushigee2266]

I have achived my requirement by adding div element in the field and make the width and height of the div to the width and height of the field. But I want to change the background of the cell/filed not div Here is datapage URL https://c4aby432.caspio.com/dp/f8c6d000d3feca7e221c426bb0ad" 

 

 

[Volomeister]

Hello @Mushigee2266

if you wish to change the background of cells based on a certain condition, you would need to loop through all rows in your report, compare respective cell values against your condition, and change the background of the cells accordingly.

I am not sure how the names of the columns from this DataPage correspond to variables in the code; I only found where maxScore is taking value from. It is a 25th column. Here is JavaScript draft that you need to adjust to map each variable to cell:


 

<script>

if (document.paintCellsOnCondition == undefined) {
const paintCellsOnCondition = (e) => {
 if (e.detail.appKey != '[@cbAppKey]') { return }

document.querySelectorAll('tr.cbResultSetDataRow').forEach(row=>{
// ONLY THIS PART OF CODE NEEDS UPDATES STARTING FROM HERE
let maxScore = parseFloat(row.querySelector('td:nth-child(25)').innerText) // 25 because respective cell in the 25th column
let second = parseFloat(row.querySelector('td:nth-child(RESPECTIVE "SECOND" COLUMN NUMBER)').innerText);
let percentageSupport = parseFloat(row.querySelector('td:nth-child(RESPECTIVE "percentageSupport" COLUMN NUMBER)').innerText);
.....  // by analogy, you need to map other variables to respective cells using td:nth-child() selector

// conditions will be the same, but actions should be slightly modified, for example, if you need to paint second cell when percentageSupport >= second
    if (percentageSupport >= second) {
     row.querySelector('td:nth-child(RESPECTIVE "SECOND" COLUMN NUMBER)').style = 'background-color: xxxxxx;'
    } 
....
 


// CODE UPDATES END HERE   
})

  
}

document.addEventListener('DataPageReady', paintCellsOnCondition)
document.paintCellsOnCondition = 'Enabled'
}

</script>

This code must be placed either in the header or footer only once.