Редактируемая пользователем таблица с переменным количеством строк в Rails

Question

Я запускаю Rails 3.2.11. Я работаю над простым проектом wiki, изучая Rails и Javascript. То, что я хочу сделать, это сохранить в моей базе данных с двумя столбцами, чье содержимое и количество строк можно редактировать пользователями, а также использовать jQuery для добавления форм для новой строки таблицы при нажатии кнопки. Таблица хранится как хэш, содержащий хеши для столбцов каждой строки. т.е. {"row1" => {"head" => "first column/header content", "tail" => "second column/data content"}, "row2" => {"head" => "first column/header content", "tail" => "second column/data content"}} Часть моей _form.html.erb для редактирования таблицы выглядит следующим образом:

<div id="node_table_row_0"> 
    <%= f.fields_for :table do |table_rows| %> 
    <%= table_rows.fields_for :row do |table_cols| %> 
     <%= table_cols.text_field :head, :id => 'node_table_row_head_0' %> 
     <%= table_cols.text_field :tail, :id => 'node_table_row_tail_0' %> 
    <% end %> 
    <% end %> 
    <button id="add_table_row" type="button" class="btn btn-small">Add Row</button> 
</div> 

Я отображение таблицы на моей странице так:

<table class="table"> 
    <% @node.table.each do |row| %> 
    <tr> 
     <th><%= row[1]['head'] %></th> <td><%= row[1]['tail'] %></td> 
    </tr> 
    <% end %> 
</table> 

И мой node.js файл содержит следующее:

$(document).ready(function(){ 
    $('#header').append('Script loaded') 
    var newIndex = 0 
    $('#add_table_row').click(function(){ 
    $('.sidebar_img').append('onclick event activated') 
    var prevIndex = newIndex 
    var prevRow = $('#node_table_row') 
    newIndex = newIndex + 1 
    var newRow = prevRow.clone(true).attr('id', 'node_table_row_'+newIndex) 
    newRow.find('#node_table_row_head').attr({ id: 'node_table_row_head_'+newIndex, name: 'node[table][row'+newIndex+'][head]'}) 
    newRow.find('#node_table_row_tail').attr({ id: 'node_table_row_tail_'+newIndex, name: 'node[table][row'+newIndex+'][tail]'}) 
    newRow.after(prevRow) 
    }); 
}); 

При нажатии на кнопку «добавить строку», я получу подтверждение того, что событие OnClick было признано, но формы не добавляются. Подхожу ли я совсем по-другому? Похоже, будет более простой способ сделать это.

Answer 1

Вы пытались использовать метод jQuery insertAfter()? используйте jQuery для выбора таблицы, затем используйте .children(). insertAfter (newRow);