Editable table with AutoForm in Meteor

Question

How can I make a table with input fields in Meteor. I've used the example from http://autoform.meteor.com/update-each but they only use 1 input field.

The functionality works with this code:

  <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>

but it created a <form> element around each <tr> and it screws up my html. What is the correct way to do it?

Excrescence

A form in a table is no valid HTML. The form should wrap around the table, or should be inside a <td>. More here: #14577476 – Doublet

But {{#autoForm id=makeUniqueID type="update" collection=Collections.Persons doc=this autosave=true}} has to be inside my for each loop. So I don't know what to do. – Excrescence

You could use divs instead of table, and fake the table-layout. #11049649 – Doublet

@Excrescence have you found a solution yet? I am facing the same issue – Highfalutin

Answer 1

Use divs with 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>

And style it as such:

.table {
  display: table;
}

.tr {
  display: table-row;
}

.td {
  display: table-cell
}

Prosper