如何用Jade生成一個表格？

Question

提前感謝您花時間嘗試提供幫助。我在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> 

任何想法？

Answer 1

這是玉有點難以猜測，因爲我們真的不看看你的凹痕在您的本地代碼的真正建立，但在這裏（您發佈的片段），好像你的缺口是不正確的。

你應該試試這個：+ 更新（加入另一個循環讓每個身下的所有同種）

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>