Rails技术问询：如何在表格主体中渲染发票字段局部视图

要实现把发票字段以表格行的形式展示，同时保留局部视图的复用性，只需要调整主视图的表格结构，以及修改局部视图的元素布局即可，具体步骤如下：

1. 调整主视图的表格结构 #

在包含表单的主视图里，把fields_for的渲染逻辑放到表格的<tbody>标签内，每个发票对应的字段组包裹在<tr>标签中：

<table>
  <thead>
    <tr>
      <th>#</th>
      <th>Date</th>
      <th>Document</th>
      <th>Description</th>
      <th>Invoice sum</th>
      <th>Gross Amount</th>
      <th>Available budget</th>
      <th>Actions</th> <!-- 新增操作列，用于删除按钮 -->
    </tr>
  </thead>
  <tbody>
    <%= f.fields_for :invoices do |invoice_form| %>
      <tr>
        <%= render 'invoices_fields', f: invoice_form %>
      </tr>
    <% end %>
  </tbody>
</table>

2. 修改局部视图_invoices_fields.html.erb #

把原来的<div>容器替换成<td>标签，每个字段对应一个表格单元格，同时别忘了添加allow_destroy所需的隐藏字段（如果需要删除功能的话）：

<!-- 序号列，用表单索引生成序号 -->
<td><%= f.index + 1 %></td>
<td class="inline input-field">
  <%= f.text_field :invoice_date %>
</td>
<td class="inline input-field">
  <%= f.text_field :invoice_type %> <!-- 对应表头的Document -->
</td>
<td class="inline input-field">
  <%= f.text_field :description %>
</td>
<td class="inline input-field">
  <%= f.text_field :invoice_sum %> <!-- 对应表头的Invoice sum -->
</td>
<td class="inline input-field">
  <%= f.text_field :gross_amount %> <!-- 对应表头的Gross Amount -->
</td>
<td class="inline input-field">
  <%= f.text_field :available_budget %> <!-- 对应表头的Available budget -->
</td>
<td>
  <!-- 隐藏字段，用于标记删除该发票 -->
  <%= f.hidden_field :_destroy %>
  <!-- 删除按钮，点击时触发销毁标记 -->
  <%= link_to 'Remove', '#', class: 'remove-invoice' %>
</td>

3. 可选：添加删除按钮的JavaScript逻辑 #

如果需要实现点击删除按钮移除表格行并标记销毁的功能，可以添加一段简单的JS：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.remove-invoice').forEach(button => {
    button.addEventListener('click', function(e) {
      e.preventDefault();
      // 找到对应的隐藏_destroy字段，设置为1标记删除
      this.closest('tr').querySelector('input[name$="_destroy"]').value = 1;
      // 隐藏该行（或者直接移除）
      this.closest('tr').style.display = 'none';
    });
  });
});

额外说明 #

• 这样既保留了_invoices_fields.html.erb局部视图的复用性，又让字段以表格行的形式整齐展示。
• 注意表头和局部视图里的字段要一一对应，比如原来的invoice_type对应表头的Document，需要确保字段名称和表头语义匹配。
• 如果需要动态添加新的发票行，可以在主视图里添加一个“添加发票”按钮，配合JavaScript动态渲染_invoices_fields局部视图的内容到表格中。

内容的提问来源于stack exchange，提问作者beginnersquestions