如何使用Jade迭代数组创建一个html表 [英] How to create an html table with Jade iterating an array

问题描述

我开始使用node expressjs框架，我遇到了这个我无法解决的问题。

I'm starting with node expressjs framework and I came across this problem I can't solve.

我正在尝试显示一些包含博客文章的表格（是的，一个博客...），但我没有完成。

I'm trying to display a table with some blog posts (yes, a blog...) but I don't get it done.

这是玉模板代码：

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

所以，任何想法？

推荐答案

我发现问题是每个TR都缺少TD标签。
所以玉石代码应该是这样的：

I found that the problem was that I was missing the TD tag for each TR. So the jade code should be like this:

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

这篇关于如何使用Jade迭代数组创建一个html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！