Question

我有一个GridView，其中ItemTempate包含一个HTML表。我试图根据GridViewRow索引设置表行的类，如下所示。

<ItemTemplate>
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="tblAlternate">
<tr class="<%#(Container.RowIndex+1)%2==0?"CustomBGColor":"WhiteBGColor"%>">
              ....                         
</tr>
</table>
</ItemTemplate>

有人可以建议怎么做吗？感谢。

Answer 1

您可以使用nth-child CSS选择器，例如：

.tblAlternate tr:nth-child(1){
  background:red;
}
.tblAlternate tr:nth-child(4){
  background:green;
}

如果数字是索引+ 1（例如，它从1开始而不是0）

在您的代码中，您似乎正在为奇数与偶数行编码，因此您可以使用：

.tblAlternate tr:nth-child(odd){
  background:red;
}
.tblAlternate tr:nth-child(even){
  background:green;
}

More on nth-child from MDN

：nth-child（an + b）CSS伪类匹配具有的元素   对于给定的积极因素，在文档树中它前面有一个+ b-1个兄弟姐妹   或n为零值，并具有父元素。

这可以用这种方式更清楚地描述：匹配元素是   所有孩子被分裂后的元素的第b个孩子   分成一组元素。

除此之外，这允许选择器匹配每隔一行   一张桌子。

根据行索引设置html表的行背景颜色

1 个答案: