DJANGO - 根據值更改文本顏色（HTML＆JS）

Question

我正在用Django創建以HTML格式顯示的表格。我想在數字爲負數時將數字顏色更改爲紅色，當數字爲正數時將顏色更改爲綠色。我知道我需要使用JS，但我無法使它工作。任何幫助將不勝感激 ！！

這裏是我的Django的HTML模板（與我的看法）：

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

我知道JS代碼實際工作，因爲我從我的previous question得到它，我測試了我的項目之外。不幸的是，我的號碼保持灰色，不會改變顏色。即使我使用「1」或「-1」而不是{{transaction.TransactionAmount}}，它仍然顯示爲灰色（我試圖從CSS中刪除灰色basecolor，但它不起作用）。

這裏是我的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 

請記住我的編程經驗有限，和THX很多幫助！

Answer 1

我想在數字爲負數時將數字顏色更改爲紅色，當數字爲正數時將數字顏色更改爲綠色。我知道我需要使用JS，但我無法使它工作。

你真的不需要在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; 
} 

Answer 2

當我測試它時，您的代碼似乎正常工作。我只需要添加red類。

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') 
    cell.classList.add('red') 
    } else { 
    cell.classList.remove('red'); 
    cell.classList.add('green'); 
    } 
} 

另外，也許你根本都忘了你的CSS爲.green和.red，因爲它沒有出現在你上面提供的CSS代碼。

Here, take a look at it in JSFiddle

。

Answer 3

在您的html代碼中，您已將'TransactionAmount'定義爲您的td元素的類，而在css中，您已將規則考慮爲'TransactionAmount'作爲id：#TransactionAmount和#TransactionAmount.green。因此，將規則更改爲.TransactionAmount和.TransactionAmount.green應該修復您的代碼。