根據值更改文本顏色

Question

我的表格中的數據隨着按鈕的點擊而改變。 如果項目為負，我希望項目變為紅色，如果項目為正，則變為綠色。 你能幫我怎么做嗎？

 var lastpr = 100 function act1(){ const tds =document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3)+0].querySelectorAll("td"); tds.forEach((item) => { item.innerHTML = ((Math.floor(Math.random() * 10)-5)/lastpr)*100; }); }

 <div> <table class="table1" style="width:100%;font-weight:bold;font-size:13px;text-align:center; border: 1px solid black;"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> </table> </div> <button onclick="act1()">change</button>

Answer 1

您可以檢查值變量是否具有正值或負值。 然后在條件內您可以設置值。

 var lastpr = 100 function act1() { const tds = document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3) + 0].querySelectorAll("td"); tds.forEach((item) => { var value = ((Math.floor(Math.random() * 10) - 5) / lastpr) * 100; item.innerHTML = value; if (value > 0){ item.style.backgroundColor = "green"; }else{ item.style.backgroundColor = "red"; } }); }

 <div> <table class="table1" style="width:100%;font-weight:bold;font-size:13px;text-align:center; border: 1px solid black;"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> </table> </div> <button onclick="act1()">change</button>

Answer 2

 var lastpr = 100 function act1(){ const tds =document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3)+0].querySelectorAll("td"); tds.forEach((item) => { const value = ((Math.floor(Math.random() * 10)-5)/lastpr)*100; item.innerHTML = value; item.style.backgroundColor = value < 0? 'red': 'green' }); }

 <div> <table class="table1" style="width:100%;font-weight:bold;font-size:13px;text-align:center; border: 1px solid black;"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> </table> </div> <button onclick="act1()">change</button>

Answer 3

您可以將該值包裝在<span>標記中並應用 class。

 var lastpr = 100; function act1() { const tds = document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3) + 0].querySelectorAll("td"); tds.forEach((item) => { const prevValue = item.textContent, newValue = ((Math.floor(Math.random() * 10) - 5) / lastpr) * 100; item.innerHTML = ` <span class="${newValue > 0? 'pos': 'neg'}"> ${newValue} </span> `; }); }

 .pos { color: green; }.neg { color: red; }.table1 { width: 100%; font-weight: bold; font-size: 13px; text-align: center; border: 1px solid black; }

 <div> <table class="table1"> <tr> <td>1</td> <td>1</td> <td>1</td> <td>1</td> </tr> <tr> <td>2</td> <td>2</td> <td>2</td> <td>2</td> </tr> <tr> <td>3</td> <td>3</td> <td>3</td> <td>3</td> </tr> </table> </div> <button onclick="act1()">change</button>