Rails -通过jquery向嵌套表单表添加行

问题:使用jquery动态添加新行到表。添加新行时，属性不增加。

我有一些困难让jquery与rails一起工作。完全披露，我从来没有太擅长javascript/jquery，但我试图了解它如何与rails集成。我使用ruby 2.3.1和Rails 5.0.0.1。

我有2个模型(表单和服务器)，但是，我将它们加入一个表单。这更像是一个测试，因为我计划添加更多的模型，并在新的Form部分中嵌套这些表单。因此，在创建表单时，我在表单上使用accepts_nested_attributes_for选项，以便在提交时写入不同的表。

下面是我的两个模型:

class Form < ApplicationRecord
  has_many :servers
  accepts_nested_attributes_for :servers, allow_destroy: true
end

和

class Server < ApplicationRecord
  belongs_to :form, required: false
end

下面是_form.html。表示形式的动词部分。正如您所看到的，它还嵌套了服务器的新表单。我检查了数据库，它在提交时工作。它创建了一个新的表单对象和新的服务器对象。

<%= form_for(form) do |f| %>
  <% if form.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(form.errors.count, "error") %> prohibited this form from being saved:</h2>
      <ul>
      <% form.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
  <div class="field">
    <%= f.label :environment %>
    <%= f.text_field :environment %>
  </div>
  <div class="field">
    <%= f.label :location %>
    <%= f.text_field :location %>
  </div>
  <div class="field">
    <%= f.label :purpose %>
    <%= f.text_field :purpose %>
  </div>
  <div class="field">
    <%= f.label :name %>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :accessibility %>
    <%= f.text_field :accessibility %>
  </div>
  <div class="field">
    <%= f.label :description %>
    <%= f.text_area :description %>
  </div>
  <!-- section for servers -->
  <table id="server-table" class="table table-bordered">
    <tr>
      <th class="row-description">Host Name</th>
      <th class="row-description">IP Address</th>
      <th class="row-description">Operating System</th>
      <th class="row-description">CPU Cores</th>
      <th class="row-description">Memory(GB)</th>
      <th class="row-description">Disk Space(GB)</th>
    </tr>
  <div id="server-row">
    <tr>
    <%= f.fields_for(:servers, Server.new) do |server| %>
      <td><%= server.text_field :hostname, class: "form-control" %></td>
      <td><%= server.text_field :ip, class: "form-control" %></td>
      <td><%= server.select :os, options_for_select(["Ubuntu", "CentOS"]) %></div>
      <td><%= server.number_field :cpucores, class: "form-control" %></td>
      <td><%= server.number_field :memory, class: "form-control" %></td>
      <td><%= server.number_field :disk, class: "form-control" %></td>
    <% end %>
    </tr>
  </div>
  </table>
  <td><button type="button" id="add-server" class="pull-right">Add Another Server!</button></td>
  <div class="actions">
    <%= f.submit %>
  </div>
<script>
  $(document).ready(function(){
      $("#add-server").click(function(){
          $("#server-table").append(''
          <tr> '
            <%= f.fields_for(:servers, Server.new) do |server| %> '
              <td><%= j server.text_field :hostname, class: "form-control" %></td> '
              <td><%= j server.text_field :ip, class: "form-control" %></td> '
              <td><%= j server.select :os, options_for_select(['Ubuntu', 'CentOS']) %></div> '
              <td><%= j server.number_field :cpucores, class: "form-control" %></td> '
              <td><%= j server.number_field :memory, class: "form-control" %></td> '
              <td><%= j server.number_field :disk, class: "form-control" %></td> '
            <% end %> '
          </tr > '
          ');
      });
  });
</script>
<% end %>

当我提交时，我注意到只有2个服务器被保存在数据库中。表中的第一行和最后一行。在检查页面时，我还注意到第一行具有第一行(0)和最后一行(在本例中)(1)的属性。无论我单击jquery按钮多少次，即使添加了行，该属性也只增加一次。

图像我正在检查表上的第三行，它应该有name="form[servers_attributes][2][cpucores]

我在这里做错了什么?为什么属性没有相应地增加?

编辑:我也注意到，我所有的<td> 's，只有一个与options_for_select打破我的jquery，如果我不逃避它与J在动词。为什么呢?如果这个<td>不存在，其他的仍然可以工作，而不用J来转义它。