如何使用 Jade 生成包含部分的表格？答案

【问题标题】：How can I generate a table with sections with Jade?如何使用 Jade 生成包含部分的表格？
【发布时间】：2014-02-18 14:43:18
【问题描述】：

提前感谢您抽出宝贵时间提供帮助。我在 node.js 中使用 Jade 模板引擎，并希望生成一个 HTML 表，其中的行分组为部分（tbody 标记）。

假设我在内存中有以下对象：

[
    { type: 'Fruit', name: 'Apple' }
  , { type: 'Fruit', name: 'Orange' }
  , { type: 'Vegetable', name: 'Carrot' }
  , { type: 'Vegetable', name: 'Spinach'}
]

（为简单起见，我们假设数组按“类型”列预先排序）。

并且我想为每个“类型”（水果与蔬菜）的 tbody 部分内的每个对象生成一个包含行的表。所以我要生成的 HTML 是：

<table>
<thead>
  <th>Type</th>
  <th>Name</th>
</thead>
<tbody id="Fruit">
  <tr>
    <td>Fruit</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Fruit</td>
    <td>Orange</td>
  </tr>
</tbody>
<tbody id="Vegetable">
  <tr>
    <td>Vegetable</td>
    <td>Carrot</td>
  </tr>
  <tr>
    <td>Vegetable</td>
    <td>Spinach</td>
  </tr>
</tbody>
</table>

我想我希望我的玉看起来像：

table
  thead
    th Type
    th Name
  - var lastType;
  each o in objs
    - if(o.type != lastType)
      tbody(id='#{o.type}')
      - lastType = o.type;
    tr
      td #{o.type}
      td #{o.name}

但这会产生：

<table>
<thead>
  <th>Type</th>
  <th>Name</th>
</thead>
<tbody id="Fruit" />
<tbody>
  <tr>
    <td>Fruit</td>
    <td>Apple</td>
  </tr>
  <tr>
    <td>Fruit</td>
    <td>Orange</td>
  </tr>
</tbody>
<tbody id="Vegetable" />
<tbody>
  <tr>
    <td>Vegetable</td>
    <td>Carrot</td>
  </tr>
  <tr>
    <td>Vegetable</td>
    <td>Spinach</td>
  </tr>
</tbody>
</table>

有什么想法吗？

【问题讨论】：

标签： node.js html-table pug

【解决方案1】：

这在 Jade 中有点难以猜测，因为我们并没有真正看到您的缩进是如何在您的本地代码中真正设置的，但是在这里（您发布的 sn-p）看起来像您的缩进是不对的。

你应该试试这个：+更新（添加另一个循环来获取每个主体下的所有相同类型）

table
    thead
        th Type
        th Name
    - var lastType;
    each o in objs
        - if (o.type != lastType)
            - lastType = o.type;
            tbody(id='#{o.type}')
                each t in objs
                    - if(t.type === lastType)
                        tr
                            td #{t.type} 
                            td #{t.name}

只需将两个 tr 标记移到您的 tbody 中，就像我上面的代码示例一样。

+更新现在将生成以下 HTML 代码：

<table>
  <thead>
    <th>Type</th>
    <th>Name</th>
  </thead>
  <tbody id="Fruit">
    <tr>
      <td>Fruit </td>
      <td>Apple</td>
    </tr>
    <tr>
      <td>Fruit </td>
      <td>Orange</td>
    </tr>
  </tbody>
  <tbody id="Vegetable">
    <tr>
      <td>Vegetable </td>
      <td>Carrot</td>
    </tr>
    <tr>
      <td>Vegetable </td>
      <td>Spinach</td>
    </tr>
  </tbody>
</table>

【讨论】：

这个解决方案对我不起作用——它只输出每个部分的第一行。这是因为tr 和td 的生成嵌套在条件(if o.type != lastType) 之下，因此我最初将它放在条件之外。
知道了——所以我必须进行两次迭代。这可行，但效率不高。

【解决方案2】：

table
  thead
    th Type
    th Name
  tbody#Fruit
    tbody
      tr
        td Fruit
        td Apple
      tr
        td Fruit
        td Orange
    tbody#Vegetable
      tbody
        tr
          td Vegetable
          td Carrot
        tr
          td Vegetable
          td Spinach

你应该用 pug basic formate 列出以下过程

【讨论】：