ASP.NET GridView动态表格按3行分组交替设置背景色

没问题，这个需求很常见，我给你两种实用的实现方式，你可以根据自己的习惯来选：

方法1：后台RowDataBound事件处理 #

这是最稳妥的方式，能精确控制每一行的样式，不用担心前端选择器的兼容性问题。

首先在你的ASPX页面里，给GridView绑定OnRowDataBound事件：

<asp:GridView ID="GridView1" runat="server" OnRowDataBound="GridView1_RowDataBound">
    <!-- 这里放你的列定义，比如BoundField、TemplateField之类的 -->
</asp:GridView>

然后在后台代码（比如对应的.cs文件）里实现这个事件方法：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // 只处理数据行，跳过表头、页脚这些非数据行
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // 计算当前行属于第几组：每3行一组，组索引从0开始
        int groupIndex = e.Row.RowIndex / 3;
        
        // 偶数组（第1、3、5...组，对应页面上的1-3行、7-9行...）设白色背景
        if (groupIndex % 2 == 0)
        {
            e.Row.BackColor = System.Drawing.Color.White;
        }
        // 奇数组（第2、4、6...组，对应4-6行、10-12行...）设灰色背景
        // 你也可以换成更柔和的灰色，比如#f5f5f5
        else
        {
            e.Row.BackColor = System.Drawing.Color.LightGray;
        }
    }
}

这里用整数除法RowIndex / 3来分组，比如RowIndex是0、1、2时，groupIndex都是0，对应第一组；3、4、5时groupIndex是1，对应第二组，以此类推。再通过组索引的奇偶性切换背景色，完美匹配你的需求。

方法2：前端CSS结合服务器端表达式（更简洁） #

如果不想写后台代码，也可以用这种更轻量的方式，靠CSS和服务器端绑定来实现：

首先在页面的<head>里加一段CSS样式：

/* 偶数组行的样式（1-3、7-9...） */
.grid-row-white {
    background-color: #ffffff;
}

/* 奇数组行的样式（4-6、10-12...） */
.grid-row-gray {
    background-color: #f0f0f0;
}

然后在GridView的RowStyle里动态绑定CSS类：

<asp:GridView ID="GridView1" runat="server">
    <RowStyle CssClass='<%# ((Container.DataItemIndex / 3) % 2 == 0) ? "grid-row-white" : "grid-row-gray" %>' />
    <!-- 你的列定义 -->
</asp:GridView>

这里Container.DataItemIndex和RowIndex是一样的，都是从0开始计数，同样通过分组索引的奇偶性来切换CSS类，效果和后台方法完全一致，但代码更简洁。

小提示 #

• 要是你的GridView开了分页，这两种方法都能正常工作，因为每一页的行索引都会从0重新计算，分组逻辑不受影响。
• 如果你想要更个性化的颜色，直接替换代码里的颜色值就行，比如把LightGray换成#e8e8e8这种更柔和的灰色。

内容的提问来源于stack exchange，提问作者evanburen