如何实现Javascript数组索引的比较？

Question

我有一个基于单元格内容的表格样式。单元格内容仅限于特定的数据，因此我创建了一个数组。如果引用数组的索引，则可以对单元格进行样式设置：

var greencell = ["item1", "item2", etc]
var cells = document.getElementById("mytable").getElementsByTagName("td");
for (var i = 0; i < cells.length; i++) {
  if (cells[i].innerHTML == greencell[0]) {
    cells[i].style.backgroundColor = "#80ff80";
  }
}

但是，我需要访问整个数组。当我设置比较时，== greencell不应用样式。我遗漏了什么？我的做法正确吗？循环通过类似于cells循环的数组，并对循环结果设置比较？此刻，我的心在发呆。

谢谢!

Answer 1

您需要循环遍历数组：

var greencell = ["item1", "item2", etc]

var cells = document.getElementById("mytable").getElementsByTagName("td");
var j = 0; 
for (var i = 0; i < cells.length; i++) {
    for (j = 0; j < greencell.length; j++) {
        if (cells[i].innerHTML == greencell[j]) {
            cells[i].style.backgroundColor = "#80ff80";
        }
    }
}

如果您希望为每个项目设置不同的颜色，则可以使用一个数组：

var colors = ["#ff0000", "#00ff00", "#0000ff"];
var cells = document.getElementById("mytable").getElementsByTagName("td");
var j = 0; // You shouldn't redeclare the variable each iteration
for (var i = 0; i < cells.length; i++) {
    for (j = 0; j < greencell.length; j++) {
        if (cells[i].innerHTML == greencell[j]) {
            cells[i].style.backgroundColor = colors[j];
        }
    }
}

Answer 2

对于更面向ES6的解决方案，您可以以Array的形式遍历HTMLCollection，然后根据单元格的文本决定样式。

HTML：

<table id="mytable">
  <tr>
    <td>item2</td>
    <td>wrong</td>
  </tr>
  <tr>
    <td>red</td>
    <td>item1</td>
  </tr>
</table>

联署材料：

var greencell = ["item1", "item2"];
var redcell = ["red", "wrong"];

var cells = document.getElementById("mytable").getElementsByTagName("td");

Array.from(cells).forEach(function(cell) {
  cell.style.cssText = getStyles(cell.innerHTML)
})

function getStyles(value) {
  if (greencell.indexOf(value) > -1) {
    return 'background-color: green; color: white';
  }
  if (redcell.indexOf(value) > -1) {
    return 'background-color: red; color: white';
  }
}

JSFiddle