我正在用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中删除灰色基色,但它不起作用)。
这是我的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
请记住,我的编程经验有限,而且帮助很多!
答案 0 :(得分:5)
我希望在数字为负数时将数字颜色更改为红色,并在数字为正数时将数字颜色更改为绿色。我知道我需要使用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;
}
答案 1 :(得分:2)
在您的HTML代码中,您已定义了“TransactionAmount”#39;作为你的td元素的一个类,而在css中,你已经定义了规则,考虑到了“TransactionAmount”。作为ID:#TransactionAmount
和#TransactionAmount.green
。因此,将规则更改为.TransactionAmount
和.TransactionAmount.green
应修复您的代码。
答案 2 :(得分:1)
我测试时你的代码似乎工作正常。我只需要添加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');
}
}
另外,也许您只是忘记了.green
和.red
的CSS,因为它不在您上面提供的CSS代码中。