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。

Answer 2

你想像这样使用css：

tr:nth-child(odd) { background: #f1f1f1; }

和/或

tr:nth-child(even) { background: #fff; }

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

2 个答案: