Jump to content
  • 0

I want to change the background color of the table cell


Mushigee2266

Question

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

forum.png

Link to comment
Share on other sites

2 answers to this question

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.

Guest
Answer this question...

×   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...
×
×
  • Create New...