如何根據另一列的值更改列的背景顏色

Question

我正在使用 Django 框架。 我有一個包含一些列的表。 我需要根據 agent_target 列更改 aht 列的背景，因此如果值低於或等於目標，則背景應該是綠色，否則應該是紅色。

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

當我嘗試使用下面的 js 訪問 AHT 列的值時，它返回未定義的值

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

Answer 1

您的 aht col 選擇器正在嘗試查找 ID，但您只使用類，您可以嘗試通過將 ID 添加到元素或使用 class 選擇第一個元素

document.querySelector('.aht')

Answer 2

您的選擇器正在嘗試查找 id 等於“aht”的標簽，而不是 class“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

Answer 3

非 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”添加為 class。 您想唯一標識每個單元格，因此您需要一個 id。 要使用“aht”作為您將使用的 ID；

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