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

user_10987656 0
Viewed 47

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)
django-templates css django python javascript
2 Answers

Your selector is trying to find a tag with id equal to "aht", not class "aht". value is not a property to find text for table value, because this is a td element, not input element, you have to use innerText property. You can try innerText or textContent

console.log(document.querySelector('.aht').innerText)

Please bear in mind this is only trying to get the text value of the first td element.

What you are trying to do can be accomplished by ternary operator in Django template. This is like an if, but shorter.

<style>
.bg-green {
background-color: green;
}
.bg-red {
background-color: red;
}
</style>
{% 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 <= item.agent_target |yesno:"bg-green,bg-red,bg-none" }}' 
>{{ item.aht}}</td>
                        <td class="text-center align-middle target">{{ item.agent_target}}</td>
    
                    </tr>
                    {% endfor %}

Please try the code and let me know if it worked! *If you think my solution answered your question please Accept this answer, thanks very much! *

References: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#yesno

user_76170270

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>
user_187993770
Related