我一直在尝试使用 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>最佳答案
我想问题在于您必须遍历每一行以生成每个单元格，因此您只需要获取行索引即可访问每个单元格。您可以使用下一个片段生成每一行和每个单元格:
<tbody>
{{each(idx) tbody}}
<tr>
{{each tbody[idx]}}
<td>${col}</td>
{{/each}}
</tr>
{{/each}}
</tbody>
干杯， 豪尔赫
关于javascript - 如何迭代 JSON 以创建表的主体 - jQuery tmpl/template，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34619853/