第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

Javascript - 當(dāng)值是......時(shí)更改表中的文本顏色

Javascript - 當(dāng)值是......時(shí)更改表中的文本顏色

絕地?zé)o雙 2023-09-14 18:06:20
我有一個(gè)小問(wèn)題，我是 Javascript 的初學(xué)者，我看了很多教程，但仍然找不到答案。我有一個(gè)簡(jiǎn)單的 HTML 表格，我經(jīng)常在其中更改值。當(dāng) td 的值為“X”時(shí)，我希望 javascript 更改 td 中的文本顏色例如，當(dāng) td ==“High”中的值讓該特定單元格中的字體顏色為紅色時(shí)。  <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>更新！所以是的，我在下面留下了效果很好的最簡(jiǎn)單的解決方案：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貢獻(xiàn)1946條經(jīng)驗(yàn) 獲得超3個(gè)贊

以下是當(dāng)該字段的值為 High 時(shí)將文本顏色更改為紅色的示例


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>


查看完整回答
反對(duì) 回復(fù) 2023-09-14
?
素胚勾勒不出你

TA貢獻(xiàn)1827條經(jīng)驗(yàn) 獲得超9個(gè)贊

您可以使用突變觀察器。更改底部的按鈕以隨機(jī)將td的內(nèi)部 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 不是“高”，您可能需要以相同的方式重置“紅色”顏色



查看完整回答
反對(duì) 回復(fù) 2023-09-14
  • 2 回答
  • 0 關(guān)注
  • 159 瀏覽
慕課專(zhuān)欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)