Question

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

table {
    border-collapse: collapse;
}
th, td {
    padding: 0;
}

但是，我需要访问整个数组。当我设置比较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时，不应用样式。我错过了什么？我是否正确接近这个？循环遍历类似于==循环的数组并在循环结果上设置比较？我的思绪目前很明显

谢谢！

Answer 1

你需要遍历数组：

$ vips copy wtc.jpg wtc.tif[tile]
$ time vips crop wtc.tif x.tif 8000 8000 100 100 --vips-leak
real    0m0.032s
user    0m0.017s
sys     0m0.014s
memory: high-water mark 254.39 KB

如果您想为每个项目使用不同的颜色，可以使用数组：

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";
        }
    }
}

Answer 2

您可以使用indexOf检查innerHTML是否与greencell的任何元素匹配：

if (greencell.indexOf(cells[i].innerHTML) !== -1) {
    cells[i].style.backgroundColor = "#80ff80";
}

Answer 3

对于更面向ES6的解决方案，您可以将HTMLCollection作为Array进行迭代，然后根据单元格的文本确定您的样式。

HTML：

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

JS：

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

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

3 个答案: