Question

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

这是我的Django HTML模板：

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'WalletJournal/style.css' %}" />

<div id="container">
<h1>{{ Transaction.TransactionDateTime }}</h1>
<table>
    <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>    
    </tr><tr>
    <div id="TransactionAmount"><td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.TransactionAmount }}</td></div>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
    <script>
        var el = document.getElementById('TransactionAmount');
        if(el<0) {
            el.addClass += "red";
        } else {
            el.addClass += "green";
        }
    </script>    
    </tr>
</table>
<h2>Feel free to contact me !</h2>
</div>

我在CSS中创建的类：

.red {
    color:#FF0000;
}

.green {
    color:#33FF3C;
}

我尝试从我在网络上找到的示例创建一些JS代码但是肯定有些错误。我的目标是检查TransactionAmount数字是负数还是正数，并相应地调整颜色。我使TransactionAmount div能够与getElementById ...

一起使用它

<script>
            var el = document.getElementById('TransactionAmount');
            if(el<0) {
                el.addClass += "red";
            } else {
                el.addClass += "green";
            }
        </script>

我的号码仍然是灰色的......

Answer 1

您需要获取元素的textContent来测试它的值。如果它是正面的，你可以使用一个单独的类来切换。并使用jquery＆＃39; $.addClass()和$.removeClass()或javascript＆＃39; classList.add()和classList.remove()。

正如Sujen K.指出的那样，这个元素有一个tr > div > td，它应该是tr > td > div。

＆＃13;

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');
  }
}

＆＃13;

.TransactionAmount {
  color: #FF0000;
}

.TransactionAmount.green {
  color: #33FF3C;
}

＆＃13;

<table>
  <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">-1</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">0</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
  <tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div class="TransactionAmount">1</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
  </tr>
</table>

＆＃13;

Answer 2

有两个问题。 HTML层次结构应为表＆gt; tr> td ，你把 div＆gt; TD 即可。第二个问题是addClass。这是来自jQuery库，如果你想使用普通的JS它可能与className。试试这个：

<div id="container">
<h1>{{ Transaction.TransactionDateTime }}</h1>
<table>
    <tr>
    <th>TRANSACTION AMOUNT</th>
    <th>BALANCE AFTER TRANSACTION</th>
    <th>TRANSACTION COMMENT</th>    
    </tr><tr>
    <td style="font-family:'Arial',serif;font-size:10pt"><div id="TransactionAmount">{{ Transaction.TransactionAmount }}</div></td>
    <td style="font-family:'Arial',serif;font-size:10pt">{{ Transaction.BalanceAfterTransaction }}</td>
    <td style="color:white">{{ Transaction.TransactionComment }}</td>
    <script>
        var el = document.getElementById('TransactionAmount');
        if(el<0) {
            el.className += "red";
        } else {
            el.className += "green";
        }
    </script>    
    </tr>
</table>
<h2>Feel free to contact me !</h2>

HTML - 使用JS根据值更改文本的颜色

2 个答案: