2011-10-27 6 views
20

Sto iniziando con il framework node expressjs e mi sono imbattuto in questo problema che non riesco a risolvere.Come creare una tabella html con Jade iterando una matrice

Sto provando a visualizzare un tavolo con alcuni post del blog (sì, un blog ...) ma non lo faccio.

Questo è il codice del modello Jade:

div 
    table 
    thead 
     tr: th Posts 
    tbody 
     each post, i in userPosts 
     tr(class=(i % 2 == 0) ? 'odd' : 'even'): a(href='/admin/post/' + post.id) #{post.author} - #{post.title} 

E questo è l'output HTML:

<div> 
    <a href="/admin/post/1">Post 1</a> 
    <a href="/admin/post/2">Post 2</a> 
    <a href="/admin/post/3">Post 3</a> 
    <table> 
    <thead> 
     <tr> 
     <th>Posts</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd"></tr> 
     <tr class="even"></tr> 
     <tr class="odd"></tr> 
    </tbody> 
    </table> 
</div> 

Quindi, tutte le idee?

+4

Controlla le regole CSS di n-esimo figlio. Non è necessario calcolare nemmeno/dispari e aggiungere manualmente una classe. http://www.w3.org/Style/Examples/007/evenodd.html –

+0

Sì, hai ragione. Ma stavo usando un disegno esistente che non volevo cambiare. Ad ogni modo, non è questo il problema. Ho già provato a stampare un tag tr senza class e non ha funzionato neanche. – PaquitoSoft

risposta

27

ho scoperto che il problema era che mi mancava il tag TD per ogni TR. Quindi il codice jade dovrebbe essere così:

div 
    table 
    thead 
     tr: th Posts 
    tbody 
     each post, i in userPosts 
     tr 
      td 
      a(href='/admin/post/' + post.id) #{post.author} - #{post.title} 
+0

hah, non l'ho visto. contento che tu abbia capito – Chance

+0

Ho dovuto rimuovere la i e fare ogni post in userPosts –

+0

qual è il significato di: next to tr? –

7

provare questo

div 
    table 
    thead 
     tr: th Posts 
    tbody 
     each post, i in userPosts 
     tr(class=(i % 2 == 0) ? 'odd' : 'even') 
      td 
      a(href='/admin/post/' + post.id) #{post.author} - #{post.title} 
+0

L'ho già provato. Non funziona. Grazie per l'aiuto. – PaquitoSoft

+0

qual è il significato di: next to tr? –