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

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

使用JS更改表格中單元格的行顏色

使用JS更改表格中單元格的行顏色

呼喚遠(yuǎn)方 2023-02-24 15:26:32
我想根據(jù)我的標(biāo)簽使用純 HTML CSS 或 JS 而不是任何外部 src 更改我的行顏色,因?yàn)樗谖蚁胍獔?zhí)行此操作的應(yīng)用程序中不受支持。下面是我的代碼:table {   width: 750px;   border-collapse: collapse;   margin:20px auto;}tr:nth-of-type(even) {   background: #eee;}tr:hover {  background-color:#f5f5f5;}th {   background: #1489b8;   color: white;   font-weight: default; }td, th {   padding: 10px;   border: 3px solid #ccc;   text-align: center;   font-size: 15px;}h3, p{  text-align: center;}<head>  <h3>Hi User,</h3>  <p>An alert is created. Following are the details.</p></head><table style="width:100%">  <thead>    <tr>      <th> Description</th>      <td>working</td>    </tr>    <tr>      <th>Parameter</th>      <td>Shutdown</td>    </tr>    <tr>      <th>Machine </th>      <td>ABC</td>    </tr>    <tr>      <th> Type</th>      <td>Sensor Machine</td>    </tr>    <tr>      <th> Severity</th>      <td>Low</td>  </thead></table>在此示例中,最后一個(gè)標(biāo)簽顯示為“低”,我希望行顏色變?yōu)榫G色。如果它讀取介質(zhì),它應(yīng)該變?yōu)椤包S色”。這有可能發(fā)生嗎?
查看完整描述

1 回答

?
jeck貓

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

您可以簡(jiǎn)單且最簡(jiǎn)單的方法是使用Javascript querySelectorAll方法獲取td's表中的所有內(nèi)容并檢查它們的textContentif并使用條件應(yīng)用顏色

如果條件matchesseverity水平那么你可以使用style任何background你喜歡使用的。

現(xiàn)場(chǎng)工作示例:

let getTds = document.querySelectorAll('table td')


getTds.forEach(function(row) {

  //Low

  if (row.textContent == 'Low') {

    row.style.background = 'green'

  }

  //Medium

  if (row.textContent == 'Medium') {

    row.style.background = 'yellow'

  }

})

table {

  width: 750px;

  border-collapse: collapse;

  margin: 20px auto;

}


tr:nth-of-type(even) {

  background: #eee;

}


tr:hover {

  background-color: #f5f5f5;

}


th {

  background: #1489b8;

  color: white;

  font-weight: default;

}


td,

th {

  padding: 10px;

  border: 3px solid #ccc;

  text-align: center;

  font-size: 15px;

}


h3,

p {

  text-align: center;

}

<head>

  <h3>Hi User,</h3>

  <p>An alert is created. Following are the details.</p>

</head>

<table style="width:100%">

  <thead>

    <tr>

      <th> Description</th>

      <td>working</td>

    </tr>

    <tr>

      <th>Parameter</th>

      <td>Shutdown</td>

    </tr>

    <tr>

      <th>Machine </th>

      <td>ABC</td>

    </tr>

    <tr>

      <th> Type</th>

      <td>Sensor Machine</td>

    </tr>

    <tr>

      <th> Severity</th>

      <td>Low</td>

    </tr>


  </thead>


  <thead>

    <tr>

      <th> Description</th>

      <td>working</td>

    </tr>

    <tr>

      <th>Parameter</th>

      <td>Shutdown</td>

    </tr>

    <tr>

      <th>Machine </th>

      <td>ABC</td>

    </tr>

    <tr>

      <th> Type</th>

      <td>Sensor Machine</td>

    </tr>

    <tr>

      <th> Severity</th>

      <td>Medium</td>

    </tr>


  </thead>

</table>


查看完整回答
反對(duì) 回復(fù) 2023-02-24
  • 1 回答
  • 0 關(guān)注
  • 226 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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