DJANGO - 根据价值改变文字颜色(HTML& JS)

时间:2017-03-11 09:57:07

标签: javascript jquery html css django

我正在用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

请记住,我的编程经验有限,而且帮助很多!

3 个答案:

答案 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代码中。

<强>

Here, take a look at it in JSFiddle