Question

我很难找到任何关于如何做到这一点的参考。

我有一个从自动csv上传加载的表，但我需要将前3行着色，因此第1行是一种颜色，第二行是另一种颜色，第二行是另一种颜色。这是为了帮助展示第一名，第二名和第三名的获胜者。

然后表格的其余部分需要有一个替代的行颜色。

这需要在onload / document就绪时完成，而不是通过任何点击方法。

有人可以帮忙吗？

Answer 1

$('table > tr:first').css('background-color', 'red');

$('table tr:nth-child(2)').css('background-color', 'blue');

$('table tr:nth-child(3)').css('background-color', 'orange');

为了完整起见，只要您的目标浏览器在您的选择器中支持nth-child，就可以使用CSS：

 table tr:nth-child(1){ background-color: red; }
 table tr:nth-child(2){ background-color: orange; }
 table tr:nth-child(3){ background-color: blue; }

或使用相邻的兄弟选择器：

 table tr:first-child { background-color: red; }
 table tr:first-child + tr { background-color: orange; }
 table tr:first-child + tr + tr { background-color: blue; }

Answer 2

你不需要jquery这样做，CSS 3 （这意味着它无法在IE8或更低版本上运行）也能正常工作，

table tr:nth-child(odd) {
    background: #EEEEEE;
}
table tr:nth-child(even) {
    background: #AAAAAA;
}
table tr:nth-child(1) {
    background: red;
}
table tr:nth-child(2) {
    background: blue;
}
table tr:nth-child(3) {
    background: green;
}

DEMO

更新：可以使用jQuery提供IE支持： -

$('table tr:even').css('background', '#EEEEEE');
$('table tr:odd').css('background', '#AAAAAA');
var rows = $('table tr');
rows.eq(0).css('background', 'red');
rows.eq(1).css('background', 'blue');
rows.eq(2).css('background', 'green');

DEMO

Answer 3

JSFiddle

使用:eq()和:gt() jQuery选择器。示例中的前3行将设置为绿色，蓝色和红色。

然后下面的一组行（大于索引2）将具有黄色和金色的交替颜色。

示例：

//1st Row
$('#test1 tr:eq(0)').css('background-color', 'green');
//2nd Row
$('#test1 tr:eq(1)').css('background-color', 'blue');
//3rd Row
$('#test1 tr:eq(2)').css('background-color', 'red');

var previousColor = '';
$('#test1 tr:gt(2)').each(function() {
    // All Others
    if (previousColor != 'Gold') {
        $(this).css('background-color', 'Gold');
        previousColor = 'Gold';
    } else {
        $(this).css('background-color', 'Yellow');
        previousColor = 'Yellow';
    }
});

Answer 4

在这种情况下使用jQuery是低效的。您可以通过css实现相同的效果，并且仅对IE8或更早版本使用jQuery回退。

//first, fourth..
table.colored tr:nth-of-type(3n+1) {
    background-color: #aaa
}

//second, fifth...
table.colored tr:nth-of-type(3n+2) {
    background-color: #777
}

//third, sixth
table.colored tr:nth-of-type(3n) {
    background-color: #F00
}

使用jquery为单个表行onload着色

4 个答案: