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

我有一个表，其中有一些值，我想根据这些值设置颜色。我所做的是：

window.onload=setColor（）；
函数setColor（）{
var elems=document.getElementsByTagName（“td”）；
对于（i=0；i

设置
测试状态
设置
通过
设置
通过

您的脚本可以更改为以下内容：

函数setColor（）{
var elems=document.queryselectoral（“myTable td:last child”）；
对于（i=0；i

设置
测试状态
设置
通过
设置
通过
我尝试回答您的问题：


您的解决方案是稳定的，可以在所有浏览器中使用。另一种实现方法是使用特定类呈现
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”
您正在设置
元素内部
元素的
背景色
，该元素位于
i
位置。在
elems[i]
内部有一个特定的
td
。
另一种方法是根据测试值（通过或失败）将类添加到
td
。
但是，我建议以下解决方案：


设置
测试状态
设置
通过
设置
通过
.失败{
背景色：红色；
}
.通过{
背景颜色：绿色；
}
window.onload=setColor（）；
函数setColor（）{
var elems=document.getElementsByTagName（“td”）；
对于（i=0；i

我建议在每个td上添加一个向上键事件处理程序，并在事件处理程序中监视td的内部文本，如果td通过或失败，则向其添加一个包含所需样式的类。相反，您可以根据插入的文本在td上设置一个类，因此，您不必通过js处理样式，也不必到处循环。执行此操作之前检查几步；）你期望有多少个细胞？几百？别担心。数万？可能会进行一些分块，即一次设置100行的样式，以便立即设置前几行的样式。如果您可以在后端执行，我会先执行。我猜
querySelectorAll
会迭代整个元素并返回匹配的元素，因此，与我的想法相比，您搜索它们的想法更好，因为我将对所有元素进行一次迭代，以查看它们是否为
td
，并再次查看它们是否具有
innerText
值。谢谢您，Wolfetto，在这种情况下，我不希望出现大量行，但是因为我在学习，我想问为什么不要求一种解决问题的有效方法：D我还注意到，通过使用
getElements
或使用
QuerySelectorAll
我将不得不迭代所有元素，但在第二种方法中，我将有一个“较小”的第二次迭代，我认为这是更好的。但我想知道除了这些，还有其他方法收集所有元素吗？在我的情况下，按照上面一条评论中的建议由后端添加类目前是不可能的。