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

Posted 2023-03-08

【中文标题】在 Meteor 中使用 AutoForm 的可编辑表格

【英文标题】：Editable table with AutoForm in Meteor

【发布时间】：2015-02-13 09:49:56

【问题描述】：

如何在 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>

但它在每个<tr> 周围创建了一个<form> 元素，它搞砸了我的html。正确的做法是什么？

【问题讨论】：

表格中的表单不是有效的 HTML。表格应该环绕在桌子周围，或者应该在<td> 内。更多信息：***.com/questions/14576976/…

但 #autoForm id=makeUniqueID type="update" collection=Collections.Persons doc=this autosave=true 必须在我的每个循环中。所以我不知道该怎么办。

您可以使用 div 代替表格，并伪造表格布局。 ***.com/questions/11049149/…

@Jamgreen 你找到解决方案了吗？我也面临同样的问题

【参考方案1】：

将divs 与 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>

并将其设置为：

.table 
  display: table;


.tr 
  display: table-row;


.td 
  display: table-cell