如何迭代 JSON 以创建表的主体 - jQuery tmpl/template
Posted
技术标签:
【中文标题】如何迭代 JSON 以创建表的主体 - jQuery tmpl/template【英文标题】：How can iterate a JSON to create the body of a table - 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>【问题讨论】：
【参考方案1】：我想问题是你必须遍历每一行来生成每个单元格，所以你只需要获取行索引来访问每个单元格。您可以使用下一个片段来生成每一行和每个单元格：
<tbody>
each(idx) tbody
<tr>
each tbody[idx]
<td>$col</td>
/each
</tr>
/each
</tbody>
干杯， 豪尔赫
【讨论】：
谢谢，伙计，它工作得很好，我一直很想弄清楚+1以上是关于如何迭代 JSON 以创建表的主体 - jQuery tmpl/template的主要内容，如果未能解决你的问题，请参考以下文章
带有 json 的 Pyspark 数据框，迭代以创建新的数据框