Как я могу изменить цвет фона столбца на основе значения другого столбца

Я использую фреймворк Django. У меня есть таблица, которая содержит несколько столбцов. Мне нужно изменить фон колонки aht на основе колонки agent_target так, чтобы если значение меньше или равно цели, фон был зеленым, в противном случае - красным.

                {% 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 %}

Когда я пытаюсь получить доступ к значению столбца AHT, используя нижеприведенный js, он возвращает неопределенное значение

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

Ваш селектор для aht col пытается найти ID, но вы используете только классы, вы можете попробовать добавить ID к элементу или выбрать первый элемент с этим классом, используя

document.querySelector('.aht')

Ваш селектор пытается найти тег с id, равным "aht", а не класс "aht". value не является свойством для поиска текста для значения таблицы, потому что это элемент td, а не элемент input, вы должны использовать свойство innerText. Вы можете попробовать innerText или textContent

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

Обратите внимание, что это только попытка получить текстовое значение первого элемента td.

То, что вы пытаетесь сделать, можно реализовать с помощью тернарного оператора в шаблоне Django. Это похоже на if, но короче.

<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 %}

Пожалуйста, попробуйте код и дайте мне знать, если он сработал! *Если вы считаете, что мое решение ответило на ваш вопрос, пожалуйста, примите этот ответ, большое спасибо! *

Ссылки: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#yesno

Не javascript

Вы действительно можете сделать это без javascript

в вашем css

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

.on_target {
   background-color: "green"
}

замените текущую строку td aht на

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

javascript

Если вы действительно хотите использовать javascript, все становится немного сложнее.

Вы добавили 'aht' в качестве класса. Вы хотите однозначно идентифицировать каждую ячейку, поэтому вам понадобится идентификатор. Чтобы использовать 'aht' в качестве идентификатора, вы должны использовать;

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

Однако, вы используете forloop, чтобы пройтись по списку, каждый из которых должен иметь уникальный id, потому что иначе в других строках будут ячейки с таким же id. Чтобы обойти это, мы можем взять число из django {{forloop.counter}}

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

Используйте тот же формат для целевого столбца

Затем, чтобы установить цвет для целевого столбца, вы можете использовать что-то вроде этого (после кода таблицы):

<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>
Вернуться на верх