Вопрос:
Я создаю таблицу, отображаемую в HTML с Django. Я хочу изменить цвет номера на красный, когда число отрицательное, и зеленое, когда число положительное. Я знаю, что мне нужно использовать JS для этого, но я не мог заставить его работать. Любая помощь будет оценена !!
Вот мой HTML-шаблон Django:
{% 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 отрицательным или положительным, и соответствующим образом отрегулируйте цвет. Я сделал div TransactionAmount, чтобы использовать его с getElementById…
<script> var el = document.getElementById(‘TransactionAmount’); if(el<0) { el.addClass += «red»; } else { el.addClass += «green»; } </script>
И мой номер по-прежнему серый.
Лучший ответ:
Вам нужно получить textContent элемента, чтобы проверить его значение. И вы можете использовать один класс, который переключается, если он положительный или нет. И либо используйте jquery $.addClass() и $.removeClass() либо javascript classList.add() и classList.remove().
Также, как указал Суйен К., у вас есть tr > div > td для этого элемента, и вместо этого он должен быть tr > td > div.
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’); } }.TransactionAmount { color: #FF0000; } .TransactionAmount.green { color: #33FF3C; }<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>Ответ №1
Есть две проблемы. HTML-иерархия должна быть table> tr> td, и вы ставите div> td. Вторая проблема – addClass. Это из библиотеки jQuery, если вы хотите использовать простой JS с классомName. Попробуй это:
<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>
