How can I change the background color of a column based on the value of another column?

I'm using Django framework. I have a table that contains some columns. I need to change the background of the aht column based on the agent_target column so if the value lower than or equal the target the background should be green, else it should be red.

                {% for item in data %}
                <tr>
                    <td class="text-center align-middle">{{ item.loginid }}</td>
                    <td class="text-center align-middle">{{ item.agentname }}</td>
                    <td class="text-center align-middle">{{ item.team }}</td>
                    <td class="text-center align-middle">{{ item.queue_name }}</td>
                    <td class="text-center align-middle">{{ item.sumduration}}</td>
                    <td class="text-center align-middle">{{ item.countduration}}</td>
                    <td class="text-center align-middle aht">{{ item.aht}}</td>
                    <td class="text-center align-middle target">{{ item.agent_target}}</td>

                </tr>
                {% endfor %}

When I try to access the value of the AHT column using the below js it returns undefined value

console.log(document.getElementById("aht").value)

Non javascript

You can actually do this without javascript

in your css

.over_target{
   background-color:"red" /* or use #ff0000 style */
}

.on_target {
   background-color: "green"
}

then replace your current td aht line with

<td class="text-center align-middle 
   {% if item.aht > item.agent_target %}
       over_target
   {% else %}
       under_target
   {% endif %}
   ">{{ item.aht}}</td>

javascript

If you really want to use javascript, it gets a bit more complicated.

You have added 'aht' as a class. You want to uniquely identify each cell, so you will need an id instead. To use 'aht' as an ID you would use;

<td class="text-center align-middle" id="aht">{{ item.aht}}</td>

However, you're using a forloop to loop through a list, each of which you will want to have a unique id, because otherwise other rows will have a cell with the same id. To get around that we can grab a number from the django {{forloop.counter}}

<td class="text-center align-middle" id="aht{{forloop.counter}}">{{ item.aht}}</td>

Use the same format for the target column

Then, to set the colour for the target column you can use something like this (after the table code):

<script>
function getColour(aht, target) {
     if (aht > target) {
        return "red"}
     return "green"
}


 {% for item in data %}
    aht = document.getElementById('aht{{forloop.counter}}).innerText
    target= document.getElementById('target{{forloop.counter}}).innerText
    targetColour = getColour(aht, target)
    document.getElementById('aht{{forloop.counter}}').style.backgroundColor = targetColour

 {%endfor%}
</script>