html - 如何垂直填充表格数据？

Question

我想在 HTML 表格中垂直排列三个数组。每个数组的数据将从上到下填充在一列中。

例如，我有三个数组:

fruit = ['pear', 'apple', 'orange']
veges = ['corn', 'radish', 'lettuce']
meat = ['beef', 'chicken', 'pork']

我希望表格看起来像这样:

<table>
  <tr>
    <td>
      pear
    </td>
  </tr>
  <tr>
    <td>
      corn
    </td>
  </tr>
  <tr>
    <td>
      beef
    </td>
  </tr>

  <tr>
    <td>
      apple
    </td>
  </tr>
  <tr>
    <td>
      radish
    </td>
  </tr>
  <tr>
    <td>
      chicken
    </td>
  </tr>

  <tr>
    <td>
      orange
    </td>
  </tr>
  <tr>
    <td>
      lettuce
    </td>
  </tr>
  <tr>
    <td>
      pork
    </td>
  </tr>
</table>

Answer 1

我可能会使用 Array#transpose 重新安排事物以匹配您的 <table>应该看起来像:

rows = [ fruit, veges, meat ].transpose

现在rows看起来像:

[
  ["pear", "corn", "beef"],
  ["apple", "radish", "chicken"],
  ["orange", "lettuce", "pork"]
]

生成表格只是遍历 rows 的简单问题:

%table
  - rows.each do |row|
    %tr
      - row.each do |food|
        %td= food