Ruby on rails 如何在rails应用程序的index.html.erb上创建包含行和列的存储目录

我有一个商店应用程序，希望我的商店项目显示在3列目录中。我希望在第三个项目放置在第一行的第三列后，第四个项目自动移动到新行。将从数据库中调用所有项

我怎样才能像缩略图一样显示我的产品目录。目前这是我在index.html.erb中的内容

<% @products.each do |product| %>
<table>
  <tr>
    <th>
<div class="entry">
  <div class="card-title" >
<%=h product.title %></div> <%= image_tag(product.image_url) %>

  <div class="price-line">
    <span class="price"><%= number_to_currency(product.price, :unit => "N", :format => "%u%n") %></span>
  </div>

  <% form_remote_tag :url => { :action => 'add_to_cart', :id => product } do %>
    <%= submit_tag "Add to Cart" , :class => "add_button" %>
    <% end %>

</div>

    </th>
</tr>
</table>
<% end %>

任何帮助都将不胜感激。我是新来的罗

---

谢谢。Ijespal

我不确定这是否是最好的方法，但您可以使用以下方法

<table>
   <% @products.each_with_index do |product, index| %>

      <% if index%3==0 %>
         <tr>
      <% end %>

      <td><%= product.name%></td>

      <% if (index+1)%3==0 %>
         </tr>
      <% end %>

    <% end %>
</table>

在这里工作得很好（：

编辑

---

这是可行的，但edgerunner的答案要好得多！：]

我不确定这是否是最好的方法，但你可以使用类似的方法

<table>
   <% @products.each_with_index do |product, index| %>

      <% if index%3==0 %>
         <tr>
      <% end %>

      <td><%= product.name%></td>

      <% if (index+1)%3==0 %>
         </tr>
      <% end %>

    <% end %>
</table>

在这里工作得很好（：

编辑

---

这是可行的，但edgerunner的答案要好得多！：]

Rails在这方面有一个很好的助手：

Array\in\u groups\u of

<table>
  <% @products.in_groups_of(3, false) do |row| %>
    <tr>
      <% row.each do |product| %>
        <td><%= product.name # and whatever else you want %></td>
      <% end %>
    </tr>
  <% end %>
</table>

---

帮助程序的

in\u groups\u通常返回一个数组数组，所有数组的大小都由第一个参数设置。如果原始元素数无法完全填充最后一个数组，则它将被
nil
值填充。如果将
false
作为第二个参数传递，则最后一个数组的长度将小于其他的没有
nil
元素。
Rails有一个很好的助手：
Array\in\u groups\u of

<table>
  <% @products.in_groups_of(3, false) do |row| %>
    <tr>
      <% row.each do |product| %>
        <td><%= product.name # and whatever else you want %></td>
      <% end %>
    </tr>
  <% end %>
</table>

帮助程序的

in\u groups\u通常返回一个数组数组，所有数组的大小都由第一个参数设置。如果原始元素数无法完全填充最后一个数组，则它将被
nil
值填充。如果将
false
作为第二个参数传递，则最后一个数组的长度将小于其他的，没有
nil
元素。
比我的好得多heheh不知道这个方法。很好！：]谢谢edgerunner。将尝试这个方法并恢复。谢谢加载。edgerunner当我尝试这个方法时，我得到了一个错误，没有为nil:NilClass定义方法“title”。从这一行。可能有什么问题吗？但是J的方法工作正常“

帮助程序的”\u groups\u中的

通常返回一个数组数组，所有数组的大小都由第一个参数设置。如果原始元素数无法完全填充最后一个数组，则它将被
nil
值填充，这就是为什么会出现错误。如果将
false
作为第二个参数传递，则最后一个数组比其他数组短，没有nil元素。这样它应该适合您。我已经更新了答案，将
false
参数添加到我的
分组调用中。太好了！它现在可以使用false作为参数传递。谢谢edgerunner。比我的好得多heheh不知道这个方法。很好！：]谢谢edgerunner.将尝试此方法并还原。感谢加载。edgerunner当我尝试此方法时，我得到一个错误，未定义nil:NilClass的方法'title'。从这一行。可能有什么问题吗？但是J的方法工作正常。
帮助程序的
in_groups_通常返回一个数组数组，所有数组的大小都由第一个参数设置r、 如果原始的元素数无法完全填充最后一个数组，那么它将被
nil
值填充，这就是为什么会出现错误。如果将
false
作为第二个参数传递，那么最后一个数组将比其他数组短，没有nil元素。这样应该对您有效。我已经更新了答案将
false
参数添加到我的
in\u groups\u of
调用中。太好了！现在可以将false作为参数传递。谢谢edgerunner。谢谢J。我将尝试这两种方法，看看哪一种效果最好。非常感谢您的帮助。J，您的方法工作得非常好。edgerunner的方法出现错误。谢谢。谢谢J。我会尝试的两种方法都可以，看看哪一种效果最好。非常感谢你的帮助。J，你的方法很好。我发现edgerunner的方法有一个错误。谢谢。