根據使用 Javascript 的值更改表數據值顏色

Question

我是 JS 新手。 我正在嘗試根據值更改表格單元格上的文本顏色：Y 或 N。我已經嘗試了互聯網上的所有內容，但似乎沒有任何效果。

這是我要格式化的表格數據

function changeValue(bool) {
    if (bool) {
        return "Y";
    } else {
        return "N";
    }
}

var els = document.getElementsByClassName('colorText');
    for (var i = 0; i < els.length; i++) {
        var cell = els[i];
    if (cell.textContent === "N") {
        cell.classList.remove('red');
    } if (cell.textContent === "Y") {
        cell.classList.remove('green');
    } 
}

<td class="centered colorText">{changeValue(someValue)}</td>

Answer 1

您可以使用 class colorText對所有td's簡單地使用querySelectorAll方法

使用定義的 CSS 類

也使用toggle而不是add或remove方法。 如果您有任何點擊事件， toggle更簡單且易於使用。

此外，要使用td ，您需要將它們包裝在table才能正常工作。

現場演示

 window.addEventListener('DOMContentLoaded', (event) => { var els = document.querySelectorAll('.colorText'); els.forEach(function(cell) { if (cell.textContent === "N") { cell.classList.toggle('red'); } if (cell.textContent === "Y") { cell.classList.toggle('green'); } }) })

 .green { color: green; }.red { color: red; }

 <table> <tr> <td class="centered colorText">Y</td> <td class="centered colorText">N</td> <td class="centered colorText">Y</td> <td class="centered colorText">N</td> </tr> </table>

使用 JS DOM CSS 方法

您還可以使用.style方法根據 textContent 為文本color ，而不是使用自定義 CSS 類。

 window.addEventListener('DOMContentLoaded', (event) => { var els = document.querySelectorAll('.colorText'); els.forEach(function(cell) { if (cell.textContent === "N") { cell.style.color = 'red'; } if (cell.textContent === "Y") { cell.style.color = 'green'; } }) })

 <table> <tr> <td class="centered colorText">Y</td> <td class="centered colorText">N</td> <td class="centered colorText">Y</td> <td class="centered colorText">N</td> </tr> </table>

Answer 2

您可以使用此代碼。

我假設您已經有一個 css 文件，其中 class 為“紅色”和“綠色”。

 function changeValue(bool) { if (bool) { return "Y"; } else { return "N"; } } var els = document.getElementsByClassName('colorText'); for (var i = 0; i < els.length; i++) { var cell = els[i]; if (cell.textContent === "N") { cell.classList.remove('red');//I am not sure if you mean to color the text green if it says "N" cell.classList.add('green') } if (cell.textContent === "Y") { cell.classList.remove('green'); cell.classList.add('red') } }

 <td class="centered colorText">Y</td>

Answer 3

在獲取 TD 標簽之前，您需要設置正確的 HTML 表

 function changeValue(bool) { if (bool) { return "Y"; } else { return "N"; } } var els = document.getElementsByClassName('colorText'); for (var i = 0; i < els.length; i++) { var cell = els[i]; if (cell.textContent === "N") { cell.classList.remove('red'); } if (cell.textContent === "Y") { console.log('boom'); cell.classList.remove('green'); } }

 <table> <tr> <td class="colorText">X</td> <td class="colorText">Y</td> <td class="colorText">Z</td> </tr> </table>

Answer 4

不知何故，單個td標簽無法按預期工作。 我使用span ，它的工作。

 function changeValue(bool) { if (bool) { return "Y"; } else { return "N"; } } var els = document.getElementsByClassName('colorText'); for (var i = 0; i < els.length; i++) { var cell = els[i]; if (cell.textContent === "N") { cell.classList.remove('green'); cell.classList.add('red'); } if (cell.textContent === "Y") { cell.classList.remove('red'); cell.classList.add('green'); } }

 .green { color:green; }.red { color:red; }

 <span class="centered colorText">Y</span>

更新：

當我使用適當的table 、 tr和td時，它可以工作。

 function changeValue(bool) { if (bool) { return "Y"; } else { return "N"; } } var els = document.getElementsByClassName('colorText'); for (var i = 0; i < els.length; i++) { var cell = els[i]; if (cell.textContent === "N") { cell.classList.remove('green'); cell.classList.add('red'); } if (cell.textContent === "Y") { cell.classList.remove('red'); cell.classList.add('green'); } }

 .green { color:green; }.red { color:red; }

 <table><tr><td class="centered colorText">Y</td></tr></table>