Javascript-当值为..时更改表中的文本颜色..什么的

Question

我有一个小问题，我是Javascript的初学者，我看了很多教程，但仍然找不到答案。我有一个简单的HTML表，我经常在其中更改值。当td的值为"0"时，我希望javascript更改td中的文本颜色；X〃；

例如，当td中的值＝"0"时；高"；让特定单元格中的字体颜色为红色。

<table id="something">
<tr>
<th>City</th>
<th>Min.</th>
<th>Max.</th>
<th>Delay</th>
</tr>
<tr>
<td>City 1</td>
<td>$20</td>
<td>$23</td>
<td>Medium</td>
</tr>
<tr>
<td>City 2</td>
<td>$20</td>
<td>$23</td>
<td>High</td>
</tr>

更新！

所以，是的，我在下面留下一个最简单的解决方案，效果很好：

elements = document.getElementsByTagName("td")
for (var i = elements.length; i--;) {
if (elements[i].innerHTML === "High") {
elements[i].style.color = "red";
}
if (elements[i].innerHTML === "Medium") {
elements[i].style.color = "orange";    
}
if (elements[i].innerHTML === "Low") {
elements[i].style.color = "green";  
}
}

Answer 1

下面是一个示例，当该字段的值为High 时，将文本颜色更改为红色

elements = document.getElementsByTagName("td")
for (var i = elements.length; i--;) {
if (elements[i].innerHTML === "High") {
elements[i].style.color = "red";
}
}

<table id="something">
<tr>
<th>City</th>
<th>Min.</th>
<th>Max.</th>
<th>Delay</th>
</tr>
<tr>
<td>City 1</td>
<td>$20</td>
<td>$23</td>
<td>Medium</td>
</tr>
<tr>
<td>City 2</td>
<td>$20</td>
<td>$23</td>
<td>High</td>
</tr>
</table>

Answer 2

正如@Prathamesh Koshti已经提到的，您可以使用突变观测器。更改底部的按钮，将td的内部HTML随机更改为"高"：

const observer = new MutationObserver(([{target: td}]) => {
if (td.innerHTML === 'High') {
td.classList.add('high');
}
else {
td.classList.remove('high');
}
});
const tds = document.querySelectorAll('td');
tds.forEach((td, ind) => {
// add assistant CSS class
td.classList.add(`index-${ind + 1}`);
// add initial style if needed
if (td.innerHTML === 'High') {
td.classList.add('high');
}
observer.observe(td, {
characterData: false, 
childList: true, 
attributes: false
});
});
document.querySelector('button').addEventListener('click',  () => {
const randomTdIndex = Math.floor(Math.random() * tds.length) + 1;
const td = document.querySelector(`td.index-${randomTdIndex}`);
if (td.innerHTML === 'High') {
td.innerHTML = Date.now().toString().substr(-4);
}
else {
td.innerHTML = 'High';
}
})

.high {
color: red;
}
button {
margin-top: 24px;
border: solid 2px #378ad3;
}

<table id="something">
<tr>
<th>City</th>
<th>Min.</th>
<th>Max.</th>
<th>Delay</th>
</tr>
<tr>
<td>City 1</td>
<td>$20</td>
<td>$23</td>
<td>High</td>
</tr>
<tr>
<td>City 2</td>
<td>$20</td>
<td>$23</td>
<td>High</td>
</tr>
</table>
<button>CHANGE RANDOM TD</button>

如果HTML不是"高"，您可能会希望以相同的方式重置"红色">