javascript - 根据值更改 td 背景颜色

Question

我正在使用谷歌表格图表，数据的值如下:

<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>

因此表值不断增加，这意味着 tr 和 td 根据测试执行和测试用例数量不断增加。

所以我喜欢做的改变是，如果td值是通过，背景颜色应该是绿色，如果失败，背景颜色应该是红色。

我尝试过

var table1 = document.getElementsByClassName('google-visualization-table-td');
var key = table1.value;

for (key in table1) {
  if(key != "Pass"){
    key.bgColor='#800000';
  } 
}; 

但运气不好!!

这怎么可能。请帮忙。

Answer 1

因此，作为通过 javascript 方式执行此操作的警告，您已经向每个单元格添加了一个样式标记，该标记将独立地重新评估和绘制每个单元格，正如您所说的，例如添加新行等，这也涉及每次都会触发该方法。

另一个需要考虑的选项是一个不需要重新触发的 css 选择器，它可以处理问题，同时不会向每个单元格添加新的样式标签，这就像 data-whatever="<value>" 的添加属性一样。与 style="background-color: <colorThatWillBeConvertedToRGBAutomatically>"到每个单元格。

所以只是一个没有js的选项；

// Nope.

[data-tag=Pass] {
  background-color: green;
}

[data-tag=Fail] {
  background-color: red;
}

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

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