使用基于文本的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 elements来做到这一点，我认为这不好，是吗？

所以我有几个问题：

• 有一种解决方法，以建立某种onload events对于elements不支持它，所以我可以喜欢做些什么magicevent=setColor(this)？我希望桌子是稳定的。

• 我在上一个问题中提出的问题是一种很好的做法吗？如果没有，你会推荐什么？

• 我怎么能实现我所做的CSS？我不明白的语法CSS内js。

先感谢您。

Answer 1

您的脚本可以更改为如下所示：function setColor(){&nbsp; &nbsp; var elems = document.querySelectorAll("#myTable td:last-child");&nbsp; &nbsp; for (i = 0; i < elems.length; i++) {&nbsp; &nbsp; &nbsp; if (elems[i].innerText === "Passed") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[i].style.backgroundColor = "green";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; else if (elems[i].innerText === "Failed")&nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[i].style.backgroundColor = "red";&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}document.addEventListener("DOMContentLoaded", setColor);<table id="myTable"><tr>&nbsp; &nbsp; <th style="width:50%;">SET</th>&nbsp; &nbsp; <th style="width:50%;">TEST STATUS</th></tr><tr>&nbsp; &nbsp; <td>Set</td>&nbsp; &nbsp; <td>Passed</td></tr><tr>&nbsp; &nbsp; <td>Set</td>&nbsp; &nbsp; <td>Passed</td></tr></table>但最好使用 CSS 类为文本着色：&nbsp; if (elems[i].innerText === "Passed") {&nbsp; &nbsp; &nbsp; elems[i].classList.add("passed");&nbsp; }&nbsp; else if (elems[i].innerText === "Failed")&nbsp; {&nbsp; &nbsp; &nbsp; elems[i].classList.add("failed");&nbsp; }在 style.css 中：.passed {&nbsp; background-color: green;}.failed {&nbsp; background-color: red;}

Answer 2

我试着回答你的问题：您的解决方案稳定且适用于所有浏览器。实现它的另一种方法可能是td使用特定的类呈现标签，并在不使用 javascript 的情况下为该类提供 css 规则。就像是：&nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp;.failed{&nbsp; &nbsp; &nbsp; &nbsp;background-color: red;&nbsp;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp;.passed{&nbsp; &nbsp; &nbsp; background-color: green;&nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; </style>&nbsp; &nbsp; <table>&nbsp; &nbsp; <tr><td class="failed">failed </td></tr>&nbsp;&nbsp; &nbsp; <tr><td class="passed">passed </td></tr>&nbsp; &nbsp; </table>您的解决方案是稳定的。请记住，如果您的表有数千行，它可能会很慢。当您使用时， elems[i].style.backgroundColor = "red";您将在位置中设置background-color元素的。里面有一个特定的. 另一种方法是根据测试的值（通过或失败）向 a 添加一个类。但是，我建议以下解决方案：elemsielems[i]tdtd<table id="myTable">&nbsp; <tr>&nbsp; &nbsp; <th style="width:50%;">SET</th>&nbsp; &nbsp; <th style="width:50%;">TEST STATUS</th>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Set</td>&nbsp; &nbsp; <td>Passed</td>&nbsp; </tr>&nbsp; <tr>&nbsp; &nbsp; <td>Set</td>&nbsp; &nbsp; <td>Passed</td>&nbsp; </tr></table><style>.failed{&nbsp; background-color: red;&nbsp;}.passed{&nbsp;background-color: green;}</style><script>window.onload = setColor();function setColor(){&nbsp; &nbsp; &nbsp; var elems = document.getElementsByTagName("td");&nbsp; &nbsp; &nbsp; for (i = 0; i < elems.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; if (elems[i].innerText === "Passed") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; elems[i].classList.add("passed");&nbsp; }else if (elems[i].innerText === "Failed"){&nbsp; &nbsp; &nbsp;elems[i].classList.add("failed");&nbsp; }&nbsp;}}</script>