javascript - 将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 pseudo class设置行的样式:

/* 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 个子伪类是 explained here .