javascript alternating row color when data change

I want to add alternating colors to rows in a table, but instead of changing color every other row I want to switch color when the data in the first column changed compare to the row above. For example in the ta开发者_运维技巧ble below, the first two row would have the same color since the first fields are both "1", and the third row would have a different color. I'm looking for a solution without third-party libraries like jquery.

1 | A

1 | B

2 | C

3 | D

4 | E

Here's one way of doing it: jsfiddle demo

This little chunk of code is pretty nice if your table is 1 dimensional:

(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

If you have tables within your table some modifications would need to be made.

If the rows are already sorted, you could just cycle through them and assign classes as needed:

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