Question

我想将交替颜色添加到表格中的行，但是当第一列中的数据与上面的行相比发生变化时，我希望切换颜色，而不是每隔一行更改颜色。例如，在下表中，前两行将具有相同的颜色，因为第一个字段都是“1”，第三行将具有不同的颜色。我正在寻找没有像jquery这样的第三方库的解决方案。

1 |一个
1 |乙
2 | ç
3 | d
4 | E

Answer 1

以下是一种方法：jsfiddle demo

Answer 2

如果你的表是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

如果表中有表格，则需要进行一些修改。

Answer 3

如果行已经排序，您可以循环浏览它们并根据需要分配类：

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

数据更改时，javascript交替显示行颜色

3 个答案: