當數據發生變化時，javascript交替行的顏色

Question

我想向表中的行添加交替顏色，但不是在每隔一行更改顏色，而是在第一列中的數據與上面的行相比發生變化時，我想切換顏色。例如在下面的表格中，前兩行將具有相同的顏色，因爲第一個字段都是「1」，而第三行將具有不同的顏色。我正在尋找一個沒有像jquery這樣的第三方庫的解決方案。

1 | A
1 | B
2 | C
3 | D
4 | Ë

Answer 1

下面是做這件事的一種方法：jsfiddle demo

Answer 2

如果行已經排序，你可以只通過他們循環，並根據需要分配類別：

var trs = document.getElementById('yourTable').rows, 
    i = 0, 
    l = trs.length, 
    altValue = true, 
    currentTr, 
    tdValue; 

while (i) { 
    i -= 1; 
    currentTr = trs[i]; 
    tdValue = currentTr.getElementsByTagName('td')[0].innerHTML; 
    if (tdValue !== currentValue) { 
     altValue = altValue ? false : true; 
    } 
    if (altValue) { 
     currentTr.className = currentTr.className ? 
      'alt' : currentTr.className + ' alt'; 
    } 
} 

Answer 3

此代碼小塊是相當如果你的表是一維的不錯：

(function(){ 
    var trs = document.getElementById('thetable').getElementsByTagName('tr'); 
    var last, toggle = false; 
    for(var i = 0; i < trs.length; i++){ 
     var tds = trs[i].getElementsByTagName('td'); 
     toggle ^= last != tds[0].innerText; 
     trs[i].style.backgroundColor = toggle ? '#AAAACC' : '#CCDDCC'; 
     last = tds[0].innerText; 
    } 
})(); 

JSFiddle

如果您的表格中有表格，則需要進行一些修改。