将css应用于动态创建的奇数/偶数行

Question

我有几个动态创建的表.行数可达1000+.创建行后,我运行以下代码:

$('[id$=TestGrid]').not('tr:first').each(function () {
    $('tr:odd', this).addClass('odd').removeClass('even');
    $('tr:even', this).addClass('even').removeClass('odd');
});

或者我应该这样做

$('[id$=TestGrid]').not('tr:first').each(function () {
    $('tr:nth-child(odd)', this).addClass('odd').removeClass('even');
    $('tr:nth-child(even)', this).addClass('even').removeClass('odd');
});

因为,它是动态的,我不知道ID,但我知道它们将以"... TestGrid"结束.

上述任何一种会导致回流问题吗？如果是这样,我该如何解决这个问题？

谢谢!

Answer 1

您可以使用CSS :nth-child伪类来设置行的样式:

/* odd rows plus skip first row */
tr[id$=TestGrid]:nth-child(2n + 3) { ... }

/* even rows */
tr[id$=TestGrid]:nth-child(2n) { ... }

你也可以在jQuery代码中使用上面的选择器:

$('tr[id$=TestGrid]:nth-child(2n + 3)').addClass("odd").removeClass("even");
$('tr[id$=TestGrid]:nth-child(2n)').addClass("even").removeClass("odd");

这里解释了第n个子伪类.