Editierbare Tabelle mit AutoForm in Meteor

Question

Wie kann ich eine Tabelle mit Eingabefeldern in Meteor erstellen. Ich habe das Beispiel von http://autoform.meteor.com/update-each verwendet, aber sie verwenden nur 1 Eingabefeld.

Die Funktionalität arbeitet mit diesem 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> 

aber es schuf ein <form> Element um jede <tr> und Schrauben meine html nach oben. Was ist der richtige Weg?

Answer 1

Verwenden div s mit 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> 

und Stil als solche:

.table { 
    display: table; 
} 

.tr { 
    display: table-row; 
} 

.td { 
    display: table-cell 
}