Jadeが配列を反復してhtmlテーブルを作成する方法

私はnode expressjsフレームワークから始めています。私は解決できないこの問題に遭遇しました。

私はいくつかのブログ投稿(はい、ブログ...)でテーブルを表示しようとしていますが、私はそれをやり遂げません。

これは翡翠のテンプレートコードです:

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}

これがHTML出力です:

<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>

だから、どんなアイデアですか?

21
はい、あなたが正しい。しかし、私は変更したくない既存のデザインを使用していました。とにかく、それは問題ではありません。私はすでにクラスレスのtrタグを印刷しようとしましたが、どちらもうまくいきませんでした。
追加された 著者 PaquitoSoft,
n番目の子CSSルールを確認してください。偶数/奇数を計算したり、クラスを手動で追加する必要はありません。 w3.org/Style/Examples/007/evenodd.en.html
追加された 著者 Peter Lyons,

2 答え

問題は、TRごとにTDタグがないことがわかった。 だから、玉のコードはこのようにすべきです:

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
追加された
私はiを削除し、各投稿をuserPostsで行う必要がありました
追加された 著者 Eduardo Dennis,
何の意味ですか:trの隣に?
追加された 著者 giorgim,
ああ、私はそれを見ませんでした。あなたはそれを把握してうれしい
追加された 著者 Chance,

これを試して

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
追加された
私はすでにそれを試しました。それは動作しません。ご協力いただきありがとうございます。
追加された 著者 PaquitoSoft,
何の意味ですか:trの隣に?
追加された 著者 giorgim,