提供永久免费的API接口，查看更多API接口，如果您有其他免费API资源，请联系我们，造福人类。

定制开发，免费评估，免费咨询，价格便宜，售后保障，前往开发服务中心或联系开发客服中心

我是JS新手。我试图根据值更改表单元格上的文本颜色：Y或N。我已经尝试了Internet上的所有内容，但似乎没有任何效果。

这是我要格式化的表数据

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>

您可以使用此代码。

我假设您已经有一个带有“ red”和“ green”类的css文件。

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>

不知何故，单个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>

您可以将所有类全部使用querySelectorAll方法td'scolorText

使用定义的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方法

您还可以根据textContent 来对文本使用.stylemethod，而不是使用自定义CSS类。color

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>

您需要先设置正确的HTML表，然后才能获取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('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>

2023-03-22 10:04:19