javascriptデータの変更時に行の色が交互に表示される

Question

テーブルの行に色を交互に追加したいのですが、1行おきに色を変更する代わりに、最初の列のデータが変更されたときに色を変更します。以下の表の例では、最初の2つの行は同じ色になります。なぜなら、最初のフィールドは両方とも「1」であり、3番目の行は異なる色を持つからです。私は、jqueryのようなサードパーティライブラリのないソリューションを探しています。

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

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

コードのこの小さな塊はかなりあります素敵なあなたのテーブルが1次元の場合：

(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

テーブル内にテーブルがある場合は、いくつかの変更を加える必要があります。