在Meteor中使用AutoForm的可编辑表格

Jam*_*een 7 javascript node.js meteor meteor-autoform

如何在Meteor中创建包含输入字段的表格.我使用了http://autoform.meteor.com/update-each中的示例,但它们只使用了1个输入字段.

该功能适用​​于此代码:

  <tbody>
    {{#each persons}}
      {{#autoForm id=makeUniqueID type="update" collection=Collections.Persons doc=this autosave=true}}
      <tr>
        <td>{{> afFieldInput name="fullName" label=false}}</td>
        <td>{{> afFieldInput name="email" label=false}}</td>
        <td>{{> afFieldInput name="address" label=false}}</td>
        <td><button type="submit" class="btn btn-xs btn-danger">Delete</button></td>
      </tr>
      {{/autoForm}}
    {{/each}}
  </tbody>
Run Code Online (Sandbox Code Playgroud)

但它<form>围绕每个创建了一个元素<tr>,它搞砸了我的HTML.这样做的正确方法是什么?

rcl*_*lai 1

div将s 与 CSS 一起使用:

<div class="table">
  {{#each persons}}
    {{autoform class="tr"}}
      <div class="td">{{> afQuickField}}</div>
      <div class="td">{{> afQuickField}}</div>
      <div class="td">{{> afQuickField}}</div>
    {{/autoform}}
  {{/each}}
</div>
Run Code Online (Sandbox Code Playgroud)

并将其样式设置为:

.table {
  display: table;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell
}
Run Code Online (Sandbox Code Playgroud)