Javascript 根据值更改td背景色

我使用的是谷歌表格图表，数据如下：

<tr class="google-visualization-table-tr-even">
  <td class="google-visualization-table-td">TC-206</td>
  <td class="google-visualization-table-td">Customer logs in</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td><td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
</tr>

<tr class="google-visualization-table-tr-odd">
  <td class="google-visualization-table-td">TC-207</td>
  <td class="google-visualization-table-td">Customer signs out</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Fail</td>
  <td class="google-visualization-table-td">Pass</td>
  <td class="google-visualization-table-td">Pass</td>
</tr>

但是没有运气

---

这是怎么可能的。请帮助。

您没有为循环使用正确的
看看这个

另外，使用

元素.value

将返回

属性值的值，而不是文本内容

下面的代码应该可以做到这一点


var elements=document.getElementsByClassName（'google-visualization-table-td'）；
对于（var i=0；i

td{
显示：块；
边框：实心1px#CCC；
}

TC-206
客户登录
失败
失败
通过
失败
通过
TC-207
客户注销
失败
失败
失败
失败
通过
通过
如果用户可以添加或删除表中的项目，或者如果您自己管理表，则可以添加侦听器。您只需将此代码添加到管理功能中，如添加或删除：-

var x = document.getElementsByClassName("google-visualization-table-td");
for (i = 0; i < x.length; i++) {
    if(x[i].innerText === 'Pass')
        x[i].style.backgroundColor = "green";
    else if(x[i].innerText === 'Fail')
        x[i].style.backgroundColor = "red";
}

var x=document.getElementsByClassName（“谷歌可视化表td”）；
对于（i=0；i

.forEach
您的HTMLTable
.rows
.forEach
您的HTMLRow
.cells
获取每个单元格内容
cell.textContent.trim（）.toLowerCase（）
如果内容是
pass | fail
添加
is-[pass | fail]
classname


[…document.getElementById（“谷歌可视化”）.rows].forEach（row=>
[…行.单元格].forEach（单元格=>{
const cont=cell.textContent.trim（）.toLowerCase（）；
如果（/^（通过|失败）$/.测试（续））{
cell.classList.add（`is-${cont}`）；
}
})
);
.is pass{background:green；}
.is fail{background:red；}

TC-206
客户登录
失败
失败
失败
通过
失败
通过
TC-207
客户注销
失败
失败
失败
失败
通过
通过
因此，作为通过javascript方式进行此操作的一个警告，您已经向每个单元格添加了一个样式标记，该标记将独立地重新评估和绘制每个单元格，例如添加新行等，每次都会触发该方法

另一个可以考虑的选项是CSS选择器，它不需要再被重放，并且在不向每个单元添加新样式标签的情况下处理该问题，它变得类似于“代码>数据的附加属性”，无论是“=”/<代码> VS >代码>样式=“背景颜色：< /代码>到每个单元格。
所以只是一个没有js的选项


//没有。
[数据标签=通过]{
背景颜色：绿色；
}
[数据标签=失败]{
背景色：红色；
}

TC-206
客户登录
失败
失败
失败
通过
失败
通过
TC-207
客户注销
失败
失败
失败
失败
通过
通过
到目前为止，您测试了什么？我在你的帖子中没有看到任何JavaScript代码。@QuentinVeron-很抱歉我添加了。若要更改元素的样式，请使用
style
属性
table1.style.backgroundColor=“red”@ZohirSalakCeNa，它不起作用
var x = document.getElementsByClassName("google-visualization-table-td");
for (i = 0; i < x.length; i++) {
    if(x[i].innerText === 'Pass')
        x[i].style.backgroundColor = "green";
    else if(x[i].innerText === 'Fail')
        x[i].style.backgroundColor = "red";
}