使用Javascript从JSON对象动态生成引导网格HTML

我正在尝试从JSON对象生成HTML。请看下面我需要的HTML和JSON输出

所需生成的HTML

<div class="container">
  <div class="row">
    <div class="col col-sm-5">Span 5</div>
    <div class="col col-sm-3">Span 3</div>
    <div class="col col-sm-2">
      <div class="col col-sm-12">Span 2</div>
      <div class="col col-sm-12">Span 2</div>
    </div>
  </div>
</div>  

<div class="container">
  <div id="replica" class="row">

  </div>
</div>

下面是我尝试的代码，它没有按预期工作，我能够实现

colspan

，但我不确定如何实现

rowsspan

。 最后一个

span2

单元格应位于第三个

span2

单元格下方，这样第一个和第二个单元格应占据两行，因为它们的

行span

为2

HTML

<div class="container">
  <div class="row">
    <div class="col col-sm-5">Span 5</div>
    <div class="col col-sm-3">Span 3</div>
    <div class="col col-sm-2">
      <div class="col col-sm-12">Span 2</div>
      <div class="col col-sm-12">Span 2</div>
    </div>
  </div>
</div>  

<div class="container">
  <div id="replica" class="row">

  </div>
</div>

Javascript

var replica = document.getElementById('replica');
for(var i = 0; i < json.length; i++) {
    replica.innerHTML += '<div class="col col-sm-' + json[i].ColSpan + '">' + json[i].Name + '</div>';
}

var replica=document.getElementById（'replica'）；
for（var i=0；i

---

这似乎符合您想要的结构，您需要将两个Col嵌套在另一个Col中

我建议您相应地创建JSON结构，比如

var json = [         {
                    "Name": "span5",
                    "ColSpan": 5
                },
                {
                    "Name": "span3",
                    "ColSpan": 3
                },
                {
                    "Name": "span2",
                    "ColSpan": 2,
                    "children":[
                      {
                          "Name": "span2",
                          "ColSpan": 12
                      },
                      {
                          "Name": "span2",
                          "ColSpan": 12
                      }
                    ]
                }
];

值得注意的是，您需要一个“children”属性来创建右侧较小的span2 div，因此在javascript中您需要对其进行导航（reduce函数可能会有所帮助）：

var replica=document.getElementById（'replica'）；
var str=“”；
for（var i=0；i（acc+''+child.Name+''，“”）
：json[i].Name）+''；
}
replica.innerHTML=str；

---

我把你的JSFiddle放在这里：

你真的需要划船吗？您只需创建一个可选的

Children

属性，并为它们添加一个条件嵌套for循环，以保持结构与所需输出相同。