如何解决如何在PugJS中使用rowspan同时从JSON对象提取变量
我有一个代表球队名单的json对象,每个球队有三名球员。我正在使用express / pug创建表数据。
输入结构如下:
{ teams: [
team: <string>,rank: <number>,members: [
name: <string>,nationality: <string>,age: <number>,...
]
],...}
我可以看到如何使用每个以下两个语句来生成团队和所有三个成员跨一行的单元格:
each val1 in teams
tr
td #{val1.team}
td #{val1.rank}
each val2 in val1.members
td
td #{val2.name}
td #{val2.nationality}
td #{val2.age}
每个团队排成一行。
|----------|---------–|--------|-----------|-----|--------|-----------|-----|--------|-----------|-----|
| Team | Rank | Name |Nationality| Age | Name |Nationality| Age | Name |Nationality| Age |
|----------|---------–|--------|-----------|-----|--------|-----------|-----|--------|-----------|-----|
但是我想让三个团队成员像这样相互重叠:
|----------|---------–|--------|-----------|-----|
| | | Name |Nationality| Age |
| | |--------|-----------|-----|
| Team | Rank | Name |Nationality| Age |
| | |--------|-----------|-----|
| | | Name |Nationality| Age |
|----------|---------–|--------|-----------|-----|
这可以使用rowpan单元格来完成,但我不知道如何映射变量。
<tr>
<td rowspan="3">Team</td>
<td rowspan="3">Rank</td>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
<tr>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
<tr>
<td>Name</td>
<td>Nationality</td>
<td>Age</td>
</tr>
如何在PugJS中映射json对象以生成布局?
致谢 史蒂夫
解决方法
您非常亲密。这是在巴哥犬中正确放入压痕并为每个玩家插入行的问题。这是codepen example,其中表格是实时生成的。
table
each team in teams
tr
td(rowspan= team.members.length + 1)= team.team
td(rowspan= team.members.length + 1)= team.rank
each player in team.members
tr
td= player.name
td= player.nationality
td= player.age
,
执行此操作的另一种方法是使用tbody
元素分割每个团队,然后可以有条件地仅在第一行中呈现“团队”和“排名”单元格。在这些单元格上设置rowspan="0"
将使它们扩展其tbody
部分的整个范围。
这是格雷厄姆(Graham)的笔叉出的codepen example。
table
each team in teams
tbody
each player,i in team.members
tr
if (i == 0)
th(rowspan='0',scope='row')= team.team
td(rowspan='0')= team.rank
td= player.name
td= player.nationality
td= player.age
给出一些数据,以上内容将呈现:
table,th,td {
border: 1px solid black;
}
<table>
<tbody>
<tr>
<th rowspan="0" scope="row">Aberdeen United</th>
<td rowspan="0">1</td>
<td>Adam</td>
<td>Ireland</td>
<td>22</td>
</tr>
<tr>
<td>Bruce</td>
<td>Scotland</td>
<td>23</td>
</tr>
<tr>
<td>Charles</td>
<td>Wales</td>
<td>21</td>
</tr>
</tbody>
</table>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。