将 <td> 颜色更改为特定值答案

【问题标题】：Change <td> color for specific value将 <td> 颜色更改为特定值
【发布时间】：2019-02-20 22:34:19
【问题描述】：

我想改变 td 的背景颜色，例如它的值为“FAILED”。

    <tbody>
    <template is="dom-repeat" items="{{enhancedOutput.backups}}" as="backup">
    <tr>
    <td>[[backup.myBackupName]]</td>
    <td>[[backup.size]] GiB</td>
    <td>[[backup.begin_time]]</td>
    <td>[[backup.end_time]]</td>
    <td>[[backup.total_time]] s</td>
    <td>IF THIS VALUE IS "FAILED" THEN CHANGE BACKGROUND-COLOR>[[backup.status]]</td>
   </tr>
   </template>
    </tbody>
    </table>

【问题讨论】：

请添加一些代码？还是工作小提琴？
我们鼓励您先自己尝试一下。如果您尝试的方法不起作用，我们可以提供帮助

标签： javascript html html-table

【解决方案1】：

您可以使用多种方式执行此操作，请查看下面的 sn-p..

在 html 中使用数据属性

td[data-content="Failed"] {
  background: red;
}

<table>
<tr>
<td data-content="Failed">Failed</td>
<td data-content="Passed">Passed</td>
</tr>
</table>

使用Jquery

$('td:contains("Failed")').css('background','red');

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Failed</td>
<td>Passed</td>
</tr>
</table>

【讨论】：

你为什么使用data-content而不是CSS类？
为什么不也使用 Vanilla JS？用户可能不想要 jquery
@Oram 如果 OP 想要基于文本的多种样式，那么他可以轻松使用 data-content
@Samleo 我使用jQuery 给出了额外的污染。我的主要解决方案是基于HTML 和CSS
@SuperUser 我不明白你的意思。例如，标准的做事方式是设置一个类failed。然后在 CSS 而不是 td[data-content="Failed"] 中使用 td.failed （注意类名不区分大小写）。虽然使用data-content 很容易，但它不是标准的，而且并不比使用类更容易......

【解决方案2】：

借用@Oram 用户描述的关于使用类而不是data-attr 的内容（没有必要）：

function triggerFailure(){ //replace this with the actual function you use to trigger the FAILED text
  var i, tdEles = document.getElementsByTagName("td");
  
  for(i=0;i<tdEles.length;i++){
    //Loop through all the elements with tag name td
    //And change their class to "failed"
    //So that the CSS code can take care of it and change the background to red
    var td = tdEles[i];
    
    //As an extra, this helps to remove formatting of where the value of the td changes from FAILED to success
    td.className = td.className.replace(/ failed/gi,"");
    
    if(td.innerHTML.toLowerCase().indexOf("failed")!= -1){ 
      //word failed has been found
      //Note that it matches any case where it can find the word "failed"
      td.className+=" failed";
    }
  }
  
}

function togglePassed(){
  document.getElementById("toToggle").innerHTML = (document.getElementById("toToggle").innerHTML=="Failed")?"Passed":"Failed";
  
  triggerFailure();
}

td{
  padding: 10px; /* just beautification */
}

td.failed{
  background: red;
  /* You can add other stuff here in case you want something more fancy than just a red background*/
}

<input type="button" onclick="triggerFailure()" value="Turn Failures red" />
<input type="button" onclick="togglePassed()" value="Toggle Failed and Passed" />
<br>

<table>
  <tr>
    <td id="toToggle">Failed</td>
    <td>Passed</td>
  </tr>
  <tr>
    <td>Just gibberish</td>
    <td>Oh no something failed!</td>
  </tr>
</table>

另外，我不知道你用什么函数把你的td中的文本变成“FAILED”，但是你应该在你的函数中调用上面的JS代码。

【讨论】：