如何在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>