javascript - DJANGO - 根据值更改文本颜色(HTML 和 JS)

Question

我正在使用 Django 创建一个以 HTML 格式显示的表格。我想在数字为负数时将数字的颜色更改为红色，在数字为正数时将其更改为绿色。我知道我需要为此使用 JS，但我无法让它工作。任何帮助将不胜感激!!

这是我的 Django HTML 模板(链接到我的 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>

自从我从 previous question 中获取 JS 代码以来，我就知道它确实有效我在我的元素之外测试了它。不幸的是，我的数字保持灰色并且不会改变颜色。即使我使用像“1”或“-1”这样的数字而不是 {{ transaction.TransactionAmount }}，它仍然显示为灰色(我也尝试从 CSS 中删除灰色底色，但没有用)。

这是我的 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;
}

如果它能有所帮助，这是我在 Django 中使用的模型:

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

请记住，我的编程经验有限，非常感谢您的帮助!

Answer 1

I want to change the number's color to red when the number is negative, and to green when the number is positive. I know I need to use JS for this but I could not make it work.

你真的不需要在 JS 中这样做，所以我提供了这个作为替代方案，它既解决了原始问题又简化了你的代码。如果您的编程经验有限，您最好采用更简单的方式使用 Django 模板来管理它，而不是使用相当冗长的 JS 解决方案。当然，如果您想修复 JS 并使用它，因为您网站上的其他原因需要它，那么其他答案将修复它。 :)

为了可读性，我将其缩减为答案。 (内联 CSS 文件和样式也是不好的做法!)

        <tr>
            <td>{{ transaction.TransactionFrom }}</td>
            <td>{{ transaction.TransactionTo }}</td> 
            <td>
                {% if transaction.TransactionAmount < 0 %}
                <div class="TransactionAmount NegativeTransaction"> 
                {% else %} 
                <div class="TransactionAmount PositiveTransaction">
                {% endif %}
                     {{ transaction.TransactionAmount }}
                </div>
            </td>
            <td>{{ transaction.BalanceAfterTransaction }}</td>
            <td><a href="{% url 'WalletJournal:detail' transaction.id %}">{{ transaction.TransactionDateTime }}...</a></td>
            <td>{{ transaction.TransactionComment }}</td>
        </tr>

以及适当的 CSS:

.NegativeTransaction {
  color: #FF0000;
}

.PositiveTransaction.green {
  color: #33FF3C;
}