如何使用 Jade 迭代数组创建 html 表答案

【问题标题】：How to create an html table with Jade iterating an array如何使用 Jade 迭代数组创建 html 表
【发布时间】：2011-12-16 19:39:03
【问题描述】：

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

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

这是 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}

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

那么，有什么想法吗？

【问题讨论】：

查看第 n 个子 CSS 规则。您不需要计算偶数/奇数并手动添加一个类。 w3.org/Style/Examples/007/evenodd.en.html
是的，你是对的。但我使用的是我不想更改的现有设计。无论如何，这不是问题。我已经尝试打印一个无类的 tr 标签，它也没有工作。

标签： node.js express pug

【解决方案1】：

试试这个

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}

【讨论】：

我已经试过了。它不起作用。感谢您的帮助。
tr旁边的:是什么意思？

【解决方案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}

【讨论】：

我必须删除 i，然后在 userPosts 中发布每个帖子
tr旁边的:是什么意思？
这段代码有什么问题。不为低于 tr 的 td 制作 tr。 .col-md-12 table.table.table-bordered.table-hover thead tr th 编号 th 标题 th 描述 th 操作 - let i=1; tasks tbody 中的每个任务 tr td #{i++} td #{task.title} td #{task.description} td a(class=${task.status==true ? 'btn btn-success' : 'btn btn-dark'}, href=/turn/${task._id}) 完成

【解决方案3】：

当前的哈巴狗版本不适合我。相反，我将代码修改为以下模式：

div
  table
    thead
      tr
        th title...
    tbody
      each post in userPosts
        tr
          td= post.author
          td= post.title

【讨论】：