问题：使用jquery动态地向表中添加新行。添加新行时，属性不会增加。
我很难让jquery使用rails。完全披露，我从来没有对javascript / jquery太好，但我试图了解它如何与rails集成。我正在使用ruby 2.3.1和Rails 5.0.0.1。
我有2个模型（表单和服务器），但是，我将它们加入到一个表单中。这更像是一个测试，因为我计划在新的Form partial中添加更多模型并嵌套这些表单。因此，在创建表单时，我在表单上使用accepts_nested_attributes_for选项，以便我可以在提交时写入不同的表。
以下是我的2个型号：
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.erb部分表格。如您所见，它还具有嵌套在其中的服务器新表单。我检查了数据库，它在提交时起作用。它创建一个新的表单对象以及新的服务器对象。
<%= 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按钮多少次，该属性只会增加一次，即使添加了行。
image 我正在检查我桌子上的第三行，它应该有name =“form [servers_attributes] [2] [cpucores]
我在这里做错了什么？为什么属性没有相应增加？
编辑：我也注意到我<td>的所有内容，如果我没有在erb中使用options_for_select转义它，那么只有J的那个会破坏我的jquery。这是为什么？如果此<td>不存在，则其他人仍然可以使用J转义它。
答案 0 :(得分：0)
所以我最终走了这条路。我没有使用ruby代码，而是将行添加为HTML，并通过将其作为计数器添加每行增加一行（请参阅下面的javascript）。这绝对不是＆＃34; Rails方式＆＃34;所以，如果有人有任何建议，请加入。
<%= 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, remote: true) 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(){
var count = 1;
$("#add-server").click(function(){
$("#server-table").append('\
<tr> \
<td><input class="form-control" type="text" name="form[servers_attributes][' + count + '][hostname]" id="form_servers_attributes_' + count + '_hostname"></td> \
<td><input class="form-control" type="text" name="form[servers_attributes][' + count + '][ip]" id="form_servers_attributes_' + count + '_ip"></td> \
<td><select name="form[servers_attributes][' + count + '][os]" id="form_servers_attributes_' + count + '_os"><option value="Ubuntu">Ubuntu</option><option value="CentOS">CentOS</option></select></td> \
<td><input class="form-control" type="number" name="form[servers_attributes][' + count + '][cpucores]" id="form_servers_attributes_' + count + '_cpucores"></td> \
<td><input class="form-control" type="number" name="form[servers_attributes][' + count + '][memory]" id="form_servers_attributes_' + count + '_memory"></td> \
<td><input class="form-control" type="number" name="form[servers_attributes][' + count + '][disk]" id="form_servers_attributes_' + count + '_disk"></td> \
</tr > \
');
count++;
});
});
</script>
<% end %>