使用基于文本的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(){

    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

我试着回答你的问题：

您的解决方案稳定且适用于所有浏览器。实现它的另一种方法可能是td使用特定的类呈现标签，并在不使用 javascript 的情况下为该类提供 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>

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

当您使用时， elems[i].style.backgroundColor = "red";您将在位置中设置background-color元素的。里面有一个特定的. 另一种方法是根据测试的值（通过或失败）向 a 添加一个类。但是，我建议以下解决方案：elemsielems[i]tdtd

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