0

我有一张标准表，里面有一堆行。我在每一行都有一个编辑链接。在页面顶部，我有一个创建新行的表单。我想要做的是在任何行上单击编辑，然后将数据加载到顶部的表单中进行编辑......这是我到目前为止的代码：

表格+表格的索引：

.page-header.position-relative
  %h1
    Expenses
= link_to "Create Expense", "#", :role => "button", :class => "btn btn-small btn-primary", :'data-placement' => 'bottom', :'data-content' => "Before you can create an expense, please create a 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"

和部分（表格+表格）：

= form_for(@expense, :html => { :style => "margin-bottom:0px !important;" }) do |f|
  - if @expense.errors.any?
    #error_explanation
      %h2
        = pluralize(@expense.errors.count, "error")
        prohibited this expense from being saved:
      %ul
        - @expense.errors.full_messages.each do |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"

和表格：

%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 do |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)

我该怎么做呢？

4

1 回答 1

1

你可以做这样的事情，

html示例：

<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示例：

$("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());
});

然后您可以使用类或其他属性来过滤您的链接和/您的表格。

这里的jsfiddle：http: //jsfiddle.net/WgwKZ/

字体： http ://api.jquery.com/

于 2013-05-02T21:26:31.003 回答