如何垂直填充数据表？答案

【问题标题】：How to populate a table with data vertically?如何垂直填充数据表？
【发布时间】：2012-06-06 06:00:28
【问题描述】：

我想在 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>

【问题讨论】：

同样的问题，没有解决方案（目前）：stackoverflow.com/questions/3669957/transpose-a-html-table
还有一个：stackoverflow.com/questions/2128663/…

标签： html ruby-on-rails ruby arrays haml

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

【讨论】：

【解决方案2】：

看看这个网站：Generate vertically-ordered HTML table in Ruby

以下是相关代码（本例中的实例变量只是为了清楚地识别控制列数和行数的因素）：

<table>
  <tbody>
    <% 0.upto(@rows_per_column-1).each do |row| %>
      <tr>
        <% 0.upto(@columns-1).each do |column| %>
        <% index = row + (column * @rows_per_column) %>
        <td><%= index %></td>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

【讨论】：