如何迭代 JSON 以创建表的主体 - jQuery tmpl/template答案

【问题标题】：How can iterate a JSON to create the body of a table - jQuery tmpl/template如何迭代 JSON 以创建表的主体 - jQuery tmpl/template
【发布时间】：2016-04-09 18:14:18
【问题描述】：

我一直在尝试使用 jQuery 模板/tmpl 来迭代 JSON 变量以创建表，我已经成功地迭代了一维 JSON，但是在尝试生成需要生成表的主体时二维迭代单元格>内部>行，我做不到。

非常感谢任何帮助！

我的代码：

//$("#blogPostTemplate").tmpl(blogPosts).appendTo("#blogPostContainer");
//  Grab this template   fill it with this data    append it to this div
var data = [{
  tableTitle: ["Stand With The Hammonds"],
  thead: [{
    header: 'H1'
  }, {
    header: 'H2'
  }, {
    header: 'H3'
  }],
  tbody: [
    [{
      col: 0
    }, {
      col: 1
    }, {
      col: 2
    }],
    [{
      col: 0
    }, {
      col: 1
    }, {
      col: 2
    }]
  ]
}];

$('#blogPostTemplate').tmpl(data).appendTo('#blogPostContainer');

table {
  border: 1px solid #F00;
}
tbody,
tr,
td {
  border: 1px solid #0F0;
}
thead,
th {
  border: 1px solid #00F;
}

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <title>standwithrand</title>
</head>

<body>
  <div id="blogPostContainer"></div>
  <script id="blogPostTemplate" type="text/x-jQuery-tmpl">
    <table>
      <h1>${tableTitle}</h1>
      <thead>
        <tr>
          {{each thead}}
          <th>${header}</th>{{/each}}
        </tr>
      </thead>
      <tbody>
        {{each tbody}}
        <tr>
          <td>${col}</td>
        </tr>
        {{/each}}
      </tbody>
    </table>
  </script>
  <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.js"></script>
</body>

</html>

【问题讨论】：

标签： javascript jquery json jquery-plugins

【解决方案1】：

我想问题是你必须遍历每一行来生成每个单元格，所以你只需要获取行索引来访问每个单元格。您可以使用下一个片段来生成每一行和每个单元格：

      <tbody>
        {{each(idx) tbody}}
        <tr>
          {{each tbody[idx]}}
            <td>${col}</td>
          {{/each}}
        </tr>
        {{/each}}
      </tbody>

干杯，豪尔赫

【讨论】：

谢谢，伙计，它工作得很好，我一直很想弄清楚+1