javascript - 使用基于文本的 javascript 设置元素的颜色

Question

我有一个包含一些值的表，我想根据它们具有的值设置颜色。我所做的是这样的:

window.onload = setColor();

function setColor() {
  var elems = document.getElementsByTagName("td");
  for (i = 0; i < elems.length; i++) {
    if (elems[i].innerText === "Passed") {
      elems[i].style.backgroundColor = "green";
    } else if (elems[i].innerText === "Failed") {
      elems[i].style.backgroundColor = "red";
    }
  }
}

<table id="myTable">
  <tr>
    <th style="width:50%;">SET</th>
    <th style="width:50%;">TEST STATUS</th>
  </tr>
  <tr>
    <td>Set</td>
    <td>Passed</td>
  </tr>
  <tr>
    <td>Set</td>
    <td>Passed</td>
  </tr>
</table>

但正如您所看到的，我循环整个 td 元素 来做到这一点，我认为这不好，是吗？

所以我有一些问题:

• 是否有一种解决方法可以为不支持它的元素设置某种onload事件，以便我可以执行类似magicevent=setColor(this )？我预计 table 会稳定。
• 我在上一个问题中提出的问题是一个好的做法吗？如果没有，您会推荐什么？
• 我怎样才能实现我在 CSS 中所做的事情？我不明白 js 中 CSS 的语法。

提前谢谢您。

Answer 1

我尝试回答您的问题:

• 您的解决方案很稳定，并且适用于所有浏览器。实现它的另一种方法可能是渲染 td带有特定类的标签，并为该类提供 css 规则，而不使用 javascript。

类似于:

    <style>
     .failed{
       background-color: red; 
     }
     .passed{
      background-color: green;
     }
    </style>

    <table>
    <tr><td class="failed">failed </td></tr> 
    <tr><td class="passed">passed </td></tr>
    </table>

• 您的解决方案很稳定。请记住，如果您的表有数千行，速度可能会很慢。

• 当您使用elems[i].style.backgroundColor = "red";时您正在设置background-color elems 内元素的就位i 。里面elems[i]有一个具体的td 。 另一种方法是将类添加到 td基于测试值(通过或失败)。 不过，我建议采用以下解决方案:

  <table id="myTable"> <tr> <th style="width:50%;">SET</th> <th style="width:50%;">TEST STATUS</th> </tr> <tr> <td>Set</td> <td>Passed</td> </tr> <tr> <td>Set</td> <td>Passed</td> </tr> </table> <style> .failed{ background-color: red; } .passed{ background-color: green; } </style> <script> window.onload = setColor(); function setColor(){ var elems = document.getElementsByTagName("td"); for (i = 0; i < elems.length; i++) { if (elems[i].innerText === "Passed") { elems[i].classList.add("passed"); }else if (elems[i].innerText === "Failed"){ elems[i].classList.add("failed"); } } } </script>