属性一行，嵌套在下面（如何在 Table 中显示正确的关系？）

Question

这是我在开始 Ruby Rails 旅程的过去几个月里遇到的最困难的问题。

好像很多人都会遇到这个问题，但我在网上找不到任何解决这个问题的东西，这意味着我的问题要么太简单了，要么我想得太难了，要么我问错了问题.请帮我找到正确的答案 and/or 正确的问题！

当用户提交表单时，它包括属性（量化）和嵌套属性（结果）。当用户单击索引时，我希望他看到量化在 header 行中创建了一个新列（对于每个新的量化实例，它会水平穿过页面）。然后对于他提交或后来添加的每个结果，我希望他看到结果在该列中创建一个新行（垂直向下页面）。

我希望我解释得很好并且没有让它听起来比实际更令人困惑。

这是我可以使用 html 标签使 table 看起来像的一种变体：

这是另一个变体：

但无论出于何种原因我无法得到这个，这就是我想要的：

我现在真的不知道，因为我已经尝试了一切，你需要什么代码来帮助我，所以我不会把它全部扔在这里，而是通过 github 在这里给你：https://github.com/RallyWithGalli/ruletoday

更新

使用下面帕特里克的回答，我能够让 table 看起来像这样：

但它的问题是，如果用户添加另一个量化项，例如 meditate (min) 并包含比它前面的行更多的结果行，那么结果将向左移动，直到它碰到具有那么多行或更多行的另一列.在上面的例子中，“2.1”应该在冥想栏中，但它却落入了体重栏。

更新 2.0

下面是 Patrick 的更新，现在是这样的：

再次感谢您尝试帕特里克。你是那个和我一起坚持到现在的人。你提到了 bootstrap。我再看看。

在此先感谢您的帮助！我将永远欠你的债。

Answer 1

这很棘手，因为数据是 column-wise 但我们需要它 row-wise。我不是 100% 确定我了解量化数据的布局方式，但解决方案的要点是，您需要两个单独的循环，因为标题 <thead> 和数据 <tbody> 位于<table>。让我们 re-work table 的平均值：

<h2>AVERAGE</h2>
<%
  averaged_data_rows = {} 
%>
<%# averaged_data_rows should end up as:
  {
    0 => [result, result, result],
    1 => [result, result, result],
    etc.
  }
%>
<table>
  <thead>
    <tr>
      <% @averaged_quantifieds.each do |averaged| %>
        <% if averaged.user == current_user %>     
          <th><%= averaged.name %> (<%= averaged.metric %>)</th>
          <% 
            averaged.results.each_index do |idx|
              averaged_data_rows[idx] ||= []
              averaged_data_rows[idx] << averaged.results.to_a[idx]
            end
          %>
        <% end %>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <% averaged_data_rows.values.each do |row| %>
      <tr>
        <% row.each do |result| %>
          <td>
            <%= result.date_value.strftime("%m-%Y") %>
            &nbsp;
            <%= result.result_value %>
          </td>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

更新

我害怕那个。另一种可能是保留数据 column-wise 并做浮动无序列表。使用像 Bootstrap 这样的 grid-framework 真的很有帮助。但是这里有一个快速但非常肮脏的想法可能会起作用（假设您不关心重量（磅）列没有 02-2015 值，所以它的 03-2015 值紧挨着另一个 02-2015值）：

<h2>AVERAGE</h2>
<div>
  <% @averaged_quantifieds.each do |averaged| %>
    <% if averaged.user == current_user %>
      <%# 
        Inline CSS like this is generally frowned upon. I am using it
        here for demonstration purposes only. The best solution would
        be to use Bootstrap or something like it to get the side-by-side
        view on wide screens and top-to-bottom view on smaller screens.
        But I think that is outside the context of this particular question.
      %>
      <div style="float:left; width:200px;">
        <h4><%= averaged.name %> (<%= averaged.metric %>)</h4>
        <ul>
          <% averaged.results.each do |result| %>
            <li>
              <%= result.date_value.strftime("%m-%Y") %>
              &nbsp;
              <%= result.result_value %>
            </li>
          <% end %>
        </ul>
      </div>
    <% end %>
  <% end %>

属性一行，嵌套在下面（如何在 Table 中显示正确的关系？）

Attribute a Row, Nested Below (How to Show Proper Relationship in Table?)

ruby-on-rails

dynamic

nested-attributes

更新

更新 2.0