I want to change the background color of the table cell

[Mushigee2266]

I am using the following code to change the background color of the cell conditionally it is chnaging the background color of the div, but I want to change the background color of the complete cell :

"

<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:#006837;font-weight: bold; height: 50px; 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:#1A9850;font-weight: bold; height: 50px; 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:#66BD63;font-weight: bold; height: 50px; 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:#A6D96A;font-weight: bold; height: 50px; 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:#D9EF8B;font-weight: bold; height: 50px; 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:#FDAE61;font-weight: bold; height: 50px;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:#F46D43;font-weight: bold; height: 50px;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:#D73027;font-weight: bold; height: 50px;display:flex; justify-content: center; align-items: center;'>[@field:Score2#]</div>";
    } 

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

 

attched is the screenshot of the result

[Flowers4Algernon]

Hello! I have found a forum post that may be helpful: