如何實現Javascript數組索引比較？

我有一個基於單元格內容的樣式表。單元格內容僅限於特定的數據，所以我創建了一個數組。如何實現Javascript數組索引比較？

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

然而，我需要訪問整個陣列：如果我參考陣列的指數I可以風格的單元格。當我設置比較==綠色單元時，不會應用樣式。我錯過了什麼？我是否正確地接近這個？通過類似於cells循環的數組循環並設置循環結果的比較？我的頭腦在這一刻是糊塗的

謝謝！

來源

2017-07-29 gr3yb3ard

您需要遍歷數組：

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

來源

2017-07-29 21:53:21

「重新聲明變量每次迭代」是沒有意義的。 'var'是分析時間事物，迭代是運行時事物。 – Ryan

謝謝@balint我正在朝那個方向走，但沒有得到正確的語法。 – gr3yb3ard

@Ryan對不起，我還在用其他語言思考。 –

您可以使用indexOf來檢查innerHTML匹配greencell任何元素：

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

來源

2017-07-29 21:55:31 Ryan

謝謝瑞恩，這很好！我覺得這是編碼中最具挑戰性的方面，有很多方法可以達成解決方案。 – gr3yb3ard

對於更多面向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

來源

2017-07-29 22:20:44

如何實現Javascript數組索引比較？

回答

相關問題