2014-12-15 11 views
7

Meteor'da giriş alanları olan bir tablo nasıl yapabilirim. Örneği http://autoform.meteor.com/update-each'dan kullandım, ancak sadece 1 giriş alanı kullanıyorlar.Meteor'da AutoForm ile düzenlenebilir tablo

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

ama her <tr> etrafında <form> unsuru oluşturdu ve mahveder html:

işlevselliği bu kodla çalışmaktadır. Bunu yapmanın doğru yolu nedir? gibi

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

Ve stil it:

CSS ile
+0

bir tabloda bir form geçerli HTML. Form tablonun etrafına sarılmalı veya bir "" olmalıdır. Daha fazla bilgi için: http://stackoverflow.com/questions/14576976/where-are-the-form-elements-allowed-within-a-table-element –

+0

Ama '{{#autoForm id = makeUniqueID type =" update "koleksiyonu = Collections.Persons doc = bu autosave = true}} 'her döngü için benim içimde olmalı. Yani ne yapacağımı bilmiyorum. – Jamgreen

+1

Tablo yerine div kullanabilir ve tablo düzenini bozabilirsiniz. http://stackoverflow.com/questions/11049149/how-to-achieve-table-layout-without-using-tables –

cevap

1

Kullanım div ler

.table { 
    display: table; 
} 

.tr { 
    display: table-row; 
} 

.td { 
    display: table-cell 
}