I am currently working on building an HTML table using Django. My goal is to dynamically change the color of numbers in the table to red when they are negative and green when they are positive. I understand that JavaScript is required for this functionality, but so far, I have been unsuccessful in implementing it. Any assistance or guidance on how to achieve this would be highly appreciated!
Below is a snippet of my Django HTML template connected to my view:
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'WalletJournal/style.css' %}" />
<div id="container">
<h1>Transaction Journal</h1>
</div>
<div id="container">
{% if latest_transaction_list %}
<table>
<tr>
<th>From</th>
<th>To</th>
<th>Amount</th>
<th>Balance</th>
<th>Date/Time</th>
<th>Comment</th>
</tr>
{% for transaction in latest_transaction_list %}
<tr>
<td style="color:white">{{ transaction.TransactionFrom }}</td>
<td style="color:white">{{ transaction.TransactionTo }}</td>
<td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">{{ transaction.TransactionAmount }}</div></td>
<td style="font-family:'Arial',serif;font-size:10pt">{{ transaction.BalanceAfterTransaction }}</td>
<td style="font-size:6pt"><a href="{% url 'WalletJournal:detail' transaction.id %}">{{ transaction.TransactionDateTime }}...</a></td>
<td style="color:white">{{ transaction.TransactionComment }}</td>
</tr>
{% endfor %}
</table>
{% else %}
<p>No transactions are available.</p>
{% endif %}
</div>
<script>
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');
}
}
</script>
I have confirmed that the JavaScript code is functional, as I tested it independently of my project. However, despite my efforts, the numbers in my table remain in gray and do not change color as intended. I even substituted {{ transaction.TransactionAmount }} with plain numbers like "1" and "-1", but the issue persists (I also tried removing the gray base color from the CSS without success).
Here is a glimpse of my CSS:
@font-face {
font-family: Eve;
src: url('eve.ttf');
}
@font-face {
font-family: Retro;
src: url('retro.ttf');
}
body {
background: white url("images/background.gif") no-repeat right bottom;
}
h1 {
font-family: Eve;
color: white;
font-size:35pt;
text-align:center;
}
h2 {
font-family: Eve;
color: white;
font-size:20pt;
text-align:center;
}
a:link {
color:#008000;
text-decoration:none;
}
a:visited {
color:#E09016;
text-decoration:none;
}
table, td {
font-family: Retro;
border-style:solid;
border-color:#3A5779;
border-width:5px 5px 5px 13px;
background:#1B2741;
font-size:10pt;
color:gray;
padding:8px;
}
th {
font-family: Eve;
border-style:solid;
border-color:#3A5779;
border-width:5px 5px 5px 13px;
background:#1B2741;
font-size:14pt;
color:white;
padding:15px;
}
#container {
margin: 0 auto;
width: 1000px;
text-align: center;
}
#TransactionAmount {
color: #FF0000;
}
#TransactionAmount.green {
color: #33FF3C;
}
Additionally, here is the Django model I am using:
from django.db import models
# Create your models here.
class Transaction(models.Model):
TransactionAmount = models.FloatField("Amount", max_length=75)
BalanceAfterTransaction = models.FloatField("Balance", max_length=75)
TransactionDateTime = models.DateTimeField("Date & Time")
TransactionComment = models.CharField("Comment", max_length=75)
TransactionFrom = models.CharField("From", max_length=75)
TransactionTo = models.CharField("To", max_length=75)
def __str__(self):
return self.TransactionComment
I have a basic understanding of programming, so any support provided will be greatly appreciated. Thank you in advance for your assistance!