我怎样才能用Jade生成一个表格?
提前感谢您抽出宝贵的时间来帮助。 我在node.js中使用了Jade模板引擎,并且想要生成一个分组为行的HTML表格(tbody标签)。
假设我在内存中有以下对象:
[ { type: 'Fruit', name: 'Apple' } , { type: 'Fruit', name: 'Orange' } , { type: 'Vegetable', name: 'Carrot' } , { type: 'Vegetable', name: 'Spinach'} ]
(为简单起见,我们假设数组是按“types”列预先sorting的)。
而且我想为每个“types”(Fruit vs. Vegetable)的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>
有任何想法吗?
这在Jade中有点难以猜到,因为我们并没有真正看到你的缩进是如何在你的本地代码中真正设置的,但是在这里(你张贴的代码片断)看起来像你的缩进是不对的。
你应该试试这个:+ 更新 (添加另一个循环来获得所有相同的types在每个主体下)
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>