首頁猿問 Javascript -...

Javascript - 當值是......時更改表中的文本顏色

JavaScript

絕地無雙 2023-09-14 18:06:20

我有一個小問題，我是 Javascript 的初學者，我看了很多教程，但仍然找不到答案。我有一個簡單的 HTML 表格，我經常在其中更改值。當 td 的值為“X”時，我希望 javascript 更改 td 中的文本顏色例如，當 td ==“High”中的值讓該特定單元格中的字體顏色為紅色時。 <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"; }}

查看完整描述

2 回答

智慧大石

TA貢獻1946條經驗獲得超3個贊

以下是當該字段的值為 High 時將文本顏色更改為紅色的示例

elements = document.getElementsByTagName("td")

for (var i = elements.length; i--;) {

if (elements[i].innerHTML === "High") {

elements[i].style.color = "red";

}

<tr>

<th>Delay</th>

</tr>

<tr>

<td>Medium</td>

</tr>

<tr>

</tr>

</table>

反對回復 2023-09-14

素胚勾勒不出你

TA貢獻1827條經驗獲得超9個贊

您可以使用突變觀察器。更改底部的按鈕以隨機將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;

}

<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 不是“高”，您可能需要以相同的方式重置“紅色”顏色

反對回復 2023-09-14

2 回答
0 關注
145 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript - 當值是......時更改表中的文本顏色

Javascript - 當值是......時更改表中的文本顏色

2 回答

添加回答