javascript - 在 Bootstrap/HTML 中使用 for 循环动态创建行

Question

我有一个应用程序脚本，可以从 Google 表格动态创建内容，将内容加载到 Bootstrap 网格组件中。

虽然代码确实可以正常工作，但我需要满足多行的需求，如下所述。

代码的简化版本是:

<? for (var i=0 ; i <lastRow; ++i) { ?>
<?if(getNSW[i] != "" && getNSW[i] != "TOTAL") {?>
        <div class="col-md-4">
                <!-- output -->
            </div>
        </div><? }} ?>

我的目标是将创建的每第 3 个 col div 放入一个新的“行”div。

输出会是这样的:

<div class="row">
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
</div>
<div class="row">
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
  <div class="col-md-4"><!-- content --></div>
</div>

显然我需要某种 for 循环来计算 cols 等......我只是为正确的语法画了一个空白。

Answer 1

试试这个:

    var output = "<div class='row'>";
    for(var i=0;i<lastRow;i++)
    {
       if((i%3)==0)
       {
          output += "</div><div class='row'>" + "<div class='col-md-4'><!-- content --></div>";
       }
       else
       {
          output += "<div class='col-md-4'><!-- content --></div>";
       }
    }

    if((i%3)!=0)
    {
       output += "</div><div class='row'>";
    }

上面的代码所做的是，每第 3 次迭代插入

</div><div class="row">

它终止了之前的 div 标签并开始了一个新的 row。

附言。您需要为要显示的内容添加逻辑。