如何迭代 JSON 来创建 table - jQuery tmpl/template 的主体

Question

我一直在尝试迭代一个 JSON 变量来创建一个 table 使用 jQuery template/tmpl 这样做，我已经成功地迭代了一个 - dimensional JSON 但是当你试图生成 table 的主体时你需要生成一个二维迭代单元格 >inside> 行，我做不到。

非常感谢任何帮助！

我的代码：

//$("#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>

Answer 1

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

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

干杯，豪尔赫

如何迭代 JSON 来创建 table - jQuery tmpl/template 的主体

How can iterate a JSON to create the body of a table - jQuery tmpl/template

javascript

jquery

json

jquery-plugins