Nested Formで動的に追加するフォームをテーブルに追加する

コード例

<table class="table table-responsive alias-table">
  <%= f.fields_for :part_number_aliases, wrapper: false do |pnaf| %>
    <tr class="fields">
      <td>
        <%= pnaf.text_field :alias_code, label: "氏名" %>
        <%= pnaf.text_field :alias_name, label: "年齢" %>
        <%= pnaf.link_to_remove 'ユーザー削除', class: "btn btn-default" %>
      </td>
    </tr>
  <% end %>
</table>
<%= f.link_to_add "ユーザー追加", :part_number_aliases, data: { target: ".alias-table" }, class: "btn btn-default" %>

解説

fields_forにwrapper: falseオプションを追加する

通常、link_to_addで追加されるフォームは<div class="fields">で囲まれるが、
wrapper: falseを指定することでそれを防ぐ。

<tr>タグにclass="fields"を指定する

link_to_addで<tr class="fields">...</tr>がごっそり動的に追加されるようになる。

追加するtableを指定する。

<tr class="fields">...</tr>が追加されるtableを指定する。
上記の例では、link_to_addのdata: { target: ".alias-table" }が相当する。