Estoy usando el marco Django. Tengo una tabla que contiene algunas columnas. Necesito cambiar el fondo de la columna aht en función de la columna agent_target, de modo que si el valor es menor o igual que el objetivo, el fondo debería ser verde, de lo contrario, debería ser rojo.
{% 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 %}Cuando trato de acceder al valor de la columna AHT usando el siguiente js, devuelve un valor indefinido
console.log(document.getElementById("aht").value)Su selector está tratando de encontrar una etiqueta con una identificación igual a "aht", no de clase "aht". value no es una propiedad para encontrar texto para el valor de la tabla, porque este es un elemento td , no un elemento de entrada , debe usar la propiedad innerText. Puedes probar innerText o textContent
console.log(document.querySelector('.aht').innerText)Tenga en cuenta que esto solo está tratando de obtener el valor de texto del primer elemento td .
Lo que está tratando de hacer puede lograrse mediante un operador ternario en la plantilla de Django. Esto es como un si, pero más corto.
<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 %}¡Prueba el código y avísame si funcionó! *Si cree que mi solución respondió a su pregunta, acepte esta respuesta, ¡muchas gracias! *
Referencias: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/innerText https://docs.djangoproject.com/en/4.1/ref/templates/builtins/#yesno
No javascript
En realidad puedes hacer esto sin javascript
en tu CSS
.over_target{ background-color:"red" /* or use #ff0000 style */ } .on_target { background-color: "green" }luego reemplace su línea td aht actual con
<td class="text-center align-middle {% if item.aht > item.agent_target %} over_target {% else %} under_target {% endif %} ">{{ item.aht}}</td>javascript
Si realmente quieres usar javascript, se vuelve un poco más complicado.
Has añadido 'aht' como clase. Desea identificar de forma única cada celda, por lo que necesitará una identificación en su lugar. Para usar 'aht' como identificación, usaría;
<td class="text-center align-middle" id="aht">{{ item.aht}}</td>Sin embargo, está utilizando un forloop para recorrer una lista, cada una de las cuales querrá tener una identificación única, porque de lo contrario, otras filas tendrán una celda con la misma identificación. Para sortear eso, podemos tomar un número del django {{forloop.counter}}
<td class="text-center align-middle" id="aht{{forloop.counter}}">{{ item.aht}}</td>Utilice el mismo formato para la columna de destino
Luego, para establecer el color de la columna de destino, puede usar algo como esto (después del código de la tabla):
<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>Su selector para aht col está tratando de encontrar una ID, pero solo está usando clases, puede intentar agregar la ID al elemento o elegir el primer elemento con esa clase usando
document.querySelector('.aht')