根据文本设置 javascript 元素的颜色

Question

我有一个 table 有一些值，我想根据它们的值设置颜色。我所做的是：

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 elements 来做这件事，我认为这不太好，是吗？

所以我有一些疑问：

是否有解决方法可以为 elements 设置某种不支持它的 onload events，这样我就可以做类似 magicevent=setColor(this) 的事情？我希望 table 是 stable.
我在上一个问题中提出的问题是好的做法吗？如果没有，你会推荐什么？
我是如何实现我在 CSS 中所做的事情的？我不明白 js.

CSS

提前致谢。

Answer 1

你的脚本可以改成这样：

function setColor(){
    var elems = document.querySelectorAll("#myTable td:last-child");
    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";
      }
    }
}

document.addEventListener("DOMContentLoaded", setColor);

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

但是最好使用CSS 类来给文本着色：

  if (elems[i].innerText === "Passed") {
      elems[i].classList.add("passed");
  }
  else if (elems[i].innerText === "Failed")
  {
      elems[i].classList.add("failed");
  }

在style.css中：

.passed {
  background-color: green;
}
.failed {
  background-color: red;
}

Answer 2

我试着回答你的问题：

您的解决方案是 stable，它适用于所有浏览器。实现它的另一种方法是使用特定的 class 呈现 td 标签，并在不使用 javascript 的情况下为 class 提供 css 规则。

类似于：

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

你的解决方案是table。请记住，如果您的 table 有数千行，它可能会很慢。
当您使用 elems[i].style.backgroundColor = "red"; 时，您将 elems 内元素的 background-color 设置在位置 i。在 elems[i] 里面有一个特定的 td。另一种方法是根据测试值（通过或失败）将 class 添加到 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>

根据文本设置 javascript 元素的颜色

Setting color of elements with javascript based on text

javascript

css

events

onload