Question

我一直在尝试使用jQuery template / tmpl迭代一个JSON变量来创建一个表，我已经成功迭代了一维JSON但是在尝试生成表的主体时需要生成一个二维迭代单元＆gt;内部＆gt;我不能这样做。

任何帮助都非常感谢！

我的代码：

//$("#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来创建表的主体 - jQuery tmpl / template

1 个答案: