gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 00:16:09 25 4
gpt4 key购买 nike

我一直在尝试使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com