ruby on rails - how to edit a table row in a form on the same page using jquery -

i have standard table bunch of rows. have edit link on each row. @ top of page, have form creates new rows. want able click edit on row , data loads form @ top editing...here's code have far:

the index form + table:

.page-header.position-relative   %h1     expenses = link_to "create expense", "#", :role => "button", :class => "btn btn-small btn-primary", :'data-placement' => 'bottom', :'data-content' => "before can create expense, please create client.", :'title' => "getting started", "data-toggle" => "modal", :id => "create-expense" .row-fluid{:style => "margin-top:20px; display:none;", :id => "expense-form"}   .alert.alert-success     = render "expense_form" - if current_user.has_expense?   = render "expense_table" 

and partials (form + table):

= form_for(@expense, :html => { :style => "margin-bottom:0px !important;" }) |f|   - if @expense.errors.any?     #error_explanation       %h2         = pluralize(@expense.errors.count, "error")         prohibited expense being saved:       %ul         - @expense.errors.full_messages.each |msg|           %li= msg   .form-inline     .input-append.date       %span.add-on         %i.icon-calendar       = f.text_field :date, :class => "input-small", :id => "date-picker", :required => "true", :value => simple_date_if_exists(@expense.date), :placeholder => "expense date"     .input-prepend       %span.add-on $       = f.text_field :amount, :class => "input-small", :required => "true", :placeholder => "amount"     = f.text_field :category, :class => "input-small", :placeholder => "category"     = f.select :client_id, options_from_collection_for_select(@possible_clients, "id", "name"), {:prompt => "choose client"}, :class => "span2"     = f.text_field :note, :placeholder => "notes", :class => "input"   .row-fluid{:style => "margin-top:20px;"}     %label.span5       = f.file_field :receipt, :style => "display: none;", :class => "ace-file-input", :id => "id-input-file-1"     .pull-right       = f.submit "add expense", :class => "btn btn-primary btn-small"       = link_to "cancel", "#", :style => "color: #333; text-decoration: none;", :class => "btn btn-small", :id => "cancel-expense" 

and table:

%table.table.table-striped.table-bordered.table-hover{:style => "margin-top:20px;"}   %tr     %th date     %th amount     %th category     %th client     %th notes     %th receipt     %th   - @expenses.each |expense|     %tr       %td= expense.date       %td= number_to_currency(expense.amount)       %td= expense.category       %td= expense.client.try(:name)       %td= truncate(expense.note, :length => 50)       %td= link_to expense.receipt_file_name, expense.receipt.url, :target => "_blank" unless expense.receipt.blank?       %td.nolink= link_to "edit", edit_expense_path(expense) 

how go doin that?

you can this,

html sample:

<form>     <input name="col_1" type="textfield"/>     <input name="col_2" type="textfield"/> </form> <table>     <tr>         <td>item 1</td>         <td>item 2</td>         <td><a href="#">edit</a></td>     </tr>     <tr>         <td>item 3</td>         <td>item 4</td>         <td><a href="#">edit</a></td>     </tr> </table> 

js sample:

$("a").on("click", function(event){     event.preventdefault();     var cols = $(this).closest("tr");     $("input[name='col_1']").val(cols.find("td:eq(0)").text());     $("input[name='col_2']").val(cols.find("td:eq(1)").text()); }); 

then can use class or other property filter link and/your table.

here jsfidle: http://jsfiddle.net/wgwkz/

fonts: http://api.jquery.com/