Hoe maak je een html-tabel met Jade iterating een array

Ik begin met het knooppunt-expressjs-framework en ik kwam dit probleem tegen dat ik niet kan oplossen.

Ik probeer een tabel weer te geven met een aantal blogberichten (ja, een blog ...) maar ik snap het niet.

Dit is de Jade-sjablooncode:

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}

En dit is de HTML-uitvoer:

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

Dus, welke ideeën dan ook?

 21
toegevoegd bewerkt
Bekeken: 3
de bron
Ja je hebt gelijk. Maar ik gebruikte een bestaand ontwerp dat ik niet wilde veranderen. Hoe dan ook, dat is niet het probleem. Ik heb al geprobeerd een classless tr-tag af te drukken en het werkte ook niet.
toegevoegd de auteur PaquitoSoft, de bron
Bekijk de CSS-regels voor kinderen. U hoeft even/oneven niet te berekenen en handmatig een klasse toe te voegen. w3.org/Style/Examples/007/evenodd.en.html
toegevoegd de auteur Peter Lyons, de bron

2 antwoord

Ik ontdekte dat het probleem was dat ik de TD-tag voor elke TR miste. Dus de jade code zou zo moeten zijn:

div
  table
    thead
      tr: th Posts
    tbody
      each post, i in userPosts
        tr
          td 
            a(href='/admin/post/' + post.id) #{post.author} - #{post.title}
29
toegevoegd
de bron
Ik moest de i verwijderen en elke post in userPosts doen
toegevoegd de auteur Eduardo Dennis, de bron
wat is de betekenis van: naast tr?
toegevoegd de auteur giorgim, de bron
hah, ik heb dat niet gezien. blij dat je het uit hebt gevonden
toegevoegd de auteur Chance, de bron

probeer dit

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}
7
toegevoegd
de bron
Ik heb die al geprobeerd. Het werkt niet. Bedankt voor je hulp.
toegevoegd de auteur PaquitoSoft, de bron
wat is de betekenis van: naast tr?
toegevoegd de auteur giorgim, de bron