Estoy creando una tabla que se muestra en HTML con Django. Quiero cambiar el color del número a rojo cuando el número es negativo y a verde cuando el número es positivo. Sé que necesito usar JS para esto, pero no pude hacerlo funcionar. Cualquier ayuda será apreciada !!
Aquí está mi plantilla HTML de Django:
{% load static %} <link rel="stylesheet" type="text/css" href="{% static 'WalletJournal/style.css' %}" /> <div id="container"> <h1>{{ Transaction.TransactionDateTime }}</h1> <table> <tr> <th>TRANSACTION AMOUNT</th> <th>BALANCE AFTER TRANSACTION</th> <th>TRANSACTION COMMENT</th> </tr><tr> <div id="TransactionAmount"><td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.TransactionAmount }}</td></div> <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td> <td style="color:white">{{ Transaction.TransactionComment }}</td> <script> var el = document.getElementById('TransactionAmount'); if(el<0) { el.addClass += "red"; } else { el.addClass += "green"; } </script> </tr> </table> <h2>Feel free to contact me !</h2> </div>Y las clases que creé en mi CSS:
.red { color:#FF0000; } .green { color:#33FF3C; }Intenté crear un código JS a partir de ejemplos que encontré en la web, pero algo debe estar mal. Mi objetivo es verificar si el número TransactionAmount es negativo o positivo y ajustar el color en consecuencia. Hice el div TransactionAmount para poder usarlo con getElementById...
<script> var el = document.getElementById('TransactionAmount'); if(el<0) { el.addClass += "red"; } else { el.addClass += "green"; } </script>Y mi número sigue siendo gris....
Debe obtener el textContent de texto del elemento para probar su valor. Y puede usar una sola clase que alterna si es positiva o no. Y use $.addClass() y $.removeClass() de jquery o classList.add( classList.add() y classList.remove() () de javascript.
Además, como señaló Sujen K., tiene un tr > div > td para este elemento, y debería ser tr > td > div en su lugar.
var els = document.getElementsByClassName('TransactionAmount'); for (var i = 0; i < els.length; i++) { var cell = els[i]; if (cell.textContent < 0) { cell.classList.remove('green') } else { cell.classList.add('green'); } } .TransactionAmount { color: #FF0000; } .TransactionAmount.green { color: #33FF3C; } <table> <tr> <th>TRANSACTION AMOUNT</th> <th>BALANCE AFTER TRANSACTION</th> <th>TRANSACTION COMMENT</th> </tr> <tr> <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">-1</div></td> <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td> <td style="color:white">{{ Transaction.TransactionComment }}</td> </tr> <tr> <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">0</div></td> <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td> <td style="color:white">{{ Transaction.TransactionComment }}</td> </tr> <tr> <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">1</div></td> <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td> <td style="color:white">{{ Transaction.TransactionComment }}</td> </tr> </table>Hay dos problemas. La jerarquía HTML debe ser table > tr > td , y debe poner div > td . El segundo problema es addClass. Esto es de la biblioteca jQuery, si desea usar JS simple, es posible con className. Prueba esto:
<div id="container"> <h1>{{ Transaction.TransactionDateTime }}</h1> <table> <tr> <th>TRANSACTION AMOUNT</th> <th>BALANCE AFTER TRANSACTION</th> <th>TRANSACTION COMMENT</th> </tr><tr> <td style="font-family:'Arial',serif;font-size:10pt"><div id="TransactionAmount">{{ Transaction.TransactionAmount }}</div></td> <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td> <td style="color:white">{{ Transaction.TransactionComment }}</td> <script> var el = document.getElementById('TransactionAmount'); if(el<0) { el.className += "red"; } else { el.className += "green"; } </script> </tr> </table> <h2>Feel free to contact me !</h2>