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

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 >{{ item.loginid }}</td>
                    <td >{{ item.agentname }}</td>
                    <td >{{ item.team }}</td>
                    <td >{{ item.queue_name }}</td>
                    <td >{{ item.sumduration}}</td>
                    <td >{{ item.countduration}}</td>
                    <td >{{ item.aht}}</td>
                    <td >{{ 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)

CodePudding user response：

Your selector for aht col is trying to find an ID but you are only using classes, you could try by adding the ID to the element or picking the first element with that class by using

document.querySelector('.aht')

CodePudding user response：

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 >{{ item.loginid }}</td>
                        <td >{{ item.agentname }}</td>
                        <td >{{ item.team }}</td>
                        <td >{{ item.queue_name }}</td>
                        <td >{{ item.sumduration}}</td>
                        <td >{{ 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 >{{ 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

CodePudding user response：

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 >{{ 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  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  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('target{{forloop.counter}}').style.backgroundColor = targetColour

 {%endfor%}
</script>