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

Posted 2023-03-03

【中文标题】如何使用 Jade 迭代数组创建 html 表

【英文标题】：How to create an html table with Jade iterating an array

【发布时间】：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 标签，它也没有工作。

【参考方案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