Question

我正在使用google table图表，数据的值类似于：

tr

因此，表值不断增加，这意味着td和td value is Pass, the background colour should be green and if its fail, it should be red.会根据测试执行和测试用例的数量而不断增加。

所以我想进行更改的是var table1 = document.getElementsByClassName('google-visualization-table-td'); var key = table1.value; for (key in table1) { if(key != "Pass"){ key.bgColor='#800000'; } };

我尝试过

{{1}}

但是没有运气！

怎么可能。请帮忙。

Answer 1

您没有使用正确的 for循环。
看看这个documentation (MDN)。

此外，使用element.value将返回attribute value的值，而不是文本内容。

下面的代码应该可以解决问题。

var elements = document.getElementsByClassName('google-visualization-table-td');

for (var i = 0; i < elements.length; i++) {
  var value = elements[i].innerText || elements[i].textContent;
  
  if (value === 'Fail') {
    elements[i].style.backgroundColor = '#FF0000';
  } else if (value === 'Pass') {
    elements[i].style.backgroundColor = '#00FF00';
  }
}

td {
  display: block;
  border: solid 1px #CCC;
}

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

Answer 2

如果用户可以在表中添加或删除项目，或者如果您自己管理表，则可以将此代码添加到诸如添加或删除的管理功能中：-

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";
}

Answer 3

.forEach您的HTMLTable .rows
.forEach您的HTMLRow .cells
获取每个单元格内容cell.textContent.trim().toLowerCase()
如果内容为pass|fail，请添加is-[pass|fail]类名

[...document.getElementById("google-visualization").rows].forEach( row =>
  [...row.cells].forEach( cell => {
       const cont = cell.textContent.trim().toLowerCase();
       if (/^(pass|fail)$/.test(cont)) {
          cell.classList.add(`is-${cont}`);
       }
  })
);

.is-pass{background: green;}
.is-fail{background: red;}

<table id="google-visualization">
  <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>
</table>

显然，最好的方法是使用CSS（而不是使用JS循环）在元素创建和样式分配时分配类fail或pass。

Answer 4

因此，请注意，您已经在每个单元格中添加了一个样式标签，可以重新评估和独立绘制每个样式，例如通过添加新行等每次都触发该方法。

要考虑的另一种选择是css选择器，它不需要重新启动，并且可以在不向每个单元格添加新样式标签的情况下处理该问题，这类似于data-whatever="<value>"与{ {1}}到每个单元格。

所以没有js选项；

style="background-color: <colorThatWillBeConvertedToRGBAutomatically>"

// Nope.

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

根据该值更改td背景色

4 个答案: