フィールドを追加し、1 つのフォームと 1 つの送信ボタンのみを保持します。
= form_tag(url: create_user_path, remote: true) do
%table
%tr
%td= text_field_tag 'user[][first_name]'
%td= text_field_tag 'user[][last_name]'
%tr.actions
%td= submit_tag 'Save'
%td= button_tag 'Add new user form', id: 'add_user_form'
%tr.new_user_row.hidden # hidden class matches the css rule: {display:none;}
%td= text_field_tag "user[][first_name]"
%td= text_field_tag "user[][last_name]"
:javascript # jQuery
$('#add_user_form').bind('click', function(e) {
var row = $('tr.new_user_row').clone().removeClass('hidden new_user_row');
$('tr.actions').before(row); # will append the <tr> before the actions
});
ユーザーコントローラーで:
def create
params[:user].each do |attr|
User.create(attr)
end
end
行tr.new_user_row.hidden
は、新しい行のテンプレートの目的を果たします。ボタンをクリックする#add_user_form
と、JS コードはテンプレート行を選択し、clone
空の入力を含むこの新しい行をテーブルの最後の表示行として追加します。