Question

我希望在一行中显示3 Cells，然后为剩余的单元格动态创建行<tr>。当我搜索这个逻辑时，我从多篇关于使用modulo的文章得到相同的答案，它似乎适用于evryone，但我没有获得所需的输出。我在这里缺少什么？

代码：

<table>
    @for (var i = 0; i < deliveryProvider.DeliveryTagInfo.DeliveryProviderTagList.Count; i++)
    {
        var deliveryTag = deliveryProvider.DeliveryTagInfo.DeliveryProviderTagList[i];

        if ((i%3) == 0) //Create new row for 4th item 
        {
            @:<tr>
        }
        <td>
            <div class="input-element checkbox">
                @Html.CheckBoxFor(x => x.DeliveryProviderList[j].DeliveryTagInfo.IsDeliveryTagSelectedList[i], new
                {
                    name = deliveryTag,
                    id = deliveryTag
                })
                <label for="@deliveryTag">
                    <span></span>@deliveryTag</label>
            </div>
        </td>
        if ((i%3) == 0)
        {
            @:</tr>
        }
    }
</table>

输出：

预期产出：

Test1

ALCOHOL   SPILLABLE    COLD_BAG

HOT_BAG    HEAVY       SIZE

Test2

abc  pqr  xyz

Answer 1

部分问题代码位于结束标记中。

    if ((i%3) == 0)
    {
        @:</tr>
    }

在第一次迭代中，i％3 = = 0，因此您在第一个语句中添加了结束标记。基本上，您只在每三个标签上创建<tr>个标签。

以下是如何解决此问题的示例：

var listCount = 11;
for (var i = 0; i < listCount; i++)
{
    if (i%3 == 0)
    {
        @:<tr>
    }

    //Add Checkboxes

    //Closing Tag
    if (((i+1) % 3 == 0 )|| i == listCount - 1)
    {
        @:</tr>     
    }
}

结束标记说明......

关于结束标记的第一个条件：

(i+1) % 3 == 0 )

由于项目已添加，我们检查是否是第三个 - 通过使用i + 1，我们将知道有多少项在行中，我们可以关闭它。

对于第二个条件：

i == listCount - 1

我们还需要考虑它是否是最后一项。例如，如果列表中只有2个项目，我们仍然需要关闭该行。

无法在Razor中的表内循环中动态添加行

1 个答案: