使用 jQuery 将 Rails 表单加载到表格中

Question

这已经让我的项目死了几天了。
我有一个标准的值表；有这样的骨架：

<table><tbody><tr><td>Stuff!</td></tr></tbody></table>

我正在尝试使用 jQuery 将内联 Rails 3 表单加载到 tbody 中，以让用户向表中添加新值。这是通过一个按钮完成的，该按钮获取我的控制器的新操作，该操作又调用 new.js.erb，它只是将表单的呈现部分添加到表中 ($("table tbody").prepend('<%= escape_javascript(render 'form') %>');)。

部分表单本身是这样的：

<tr>
  <td>
    <%= form_for @model, :remote => true do |f| %>
  </td>
  <td>
    <%= f.text_field :column %>
  </td>
  <td>
    <%= f.submit "Add" %>
    <% end %>
  </td>
</tr>

这就是混乱的开始：在 Webkit 浏览器和 IE 中，这可以按预期工作！生成的 HTML 如下所示：

<table>
  <tbody>
    <tr>
      <td>
        <form>
        </form>
      </td>
      <td>
        <input>
      </td>
      <td>
        <input type="submit">
      <td>
    </tr>
    <tr>The list of values</tr>
  </tbody>
</table>

当然，在输入开始之前，表单在同一个单元格中开始和结束的事实应该引发一个危险信号，表明出现问题。但是，表单仍然可以提交并且可以正常工作。

在 Firefox 中，情况并非如此。表单呈现的内容更像这样（显示的只是前置行中的内容，因为其他所有内容都相同）：

<td>
  <form>
  </form>
  <td>
    <input>
  </td>
  <td>
    <input type="submit">
  <td>
</td>

这里的区别在于，与 Webkit/IE 浏览器不同，Firefox 将所有内容都放入 form 标签的单元格中。此外，该表单根本不起作用 - 它甚至不提交。甚至没有发送请求。

现在，从我的一些研究中，我了解到我在这里可能犯了一个巨大的错误，不同之处在于浏览器尝试以不同的方式呈现我遗漏的任何内容。通过玩弄它，我发现这与 Rails 表单如何与表格交互几乎没有关系 - 如果您只是在表格中呈现部分内容，则 HTML 在浏览器之间是相同的（表单标签仍然在其他输入之前关闭但是，开始，这可能意味着我将 放在错误的位置！）。当我使用 jQuery 预先渲染部分时发生了错误：可能由于没有封闭的表格标签，部分渲染错误，然后插入到表格中，导致问题。

真的，我被难住了。我已经广泛地寻找了这个，虽然有一些切线相关的问题似乎都没有真正解决我的问题。

我预计我犯了一些非常简单的错误 - 但它是什么？

任何帮助将不胜感激！我希望我已经尽可能清楚地解释了这个问题。

Answer 1

看局部就很明显了。您有嵌套错误。如果您在某个元素（在本例中为表格单元格）中打开一个表单标签，您也需要将其关闭。在这种情况下，验证标记会有所帮助。

如果你必须使用表格，你可以在表格周围加上表格标签，然后将完整的东西插入页面。