どのように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"; 
    } 
} 

ただし、アレイ全体にアクセスする必要があります。比較==グリーンセルを設定すると、スタイリングは適用されません。私は何が欠けていますか？私はこれに正しく近づいていますか？ 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

かどうかをチェックするために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