用于循环网格行编号

问题描述

我有一个由8列乘97行组成的数据网格,我想用for循环将第0列中的第4行从0到23进行编号

我想替换数字的硬编码。

    <div style="grid-row:2;grid-column:1;text-align:right;font-weight:bold">0</div>
    <div style="grid-row:3;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:4;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:5;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:6;grid-column:1;text-align:right;font-weight:bold">1</div>
    <div style="grid-row:7;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:8;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:9;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:10;grid-column:1;text-align:right;font-weight:bold">2</div>
    <div style="grid-row:11;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:12;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:13;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:14;grid-column:1;text-align:right;font-weight:bold">3</div>
    <div style="grid-row:15;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:16;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:17;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:18;grid-column:1;text-align:right;font-weight:bold">4</div>
    <div style="grid-row:19;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:20;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:21;grid-column:1;text-align:right;font-weight:bold"></div>
    <div style="grid-row:22;grid-column:1;text-align:right;font-weight:bold">5</div>

以此类推

解决方法

如果您使用Razor进行编码,则代码如下所示:

@{
    var j = 0;
}

@for (var i = 0; i < 97; i++)
{
    <div style="grid-row:@(i+2);grid-column:1;text-align:right;font-weight:bold">
        @if (i % 4 == 0)
        {
            @(j++)
        }
    </div>
}

输出预览: enter image description here