发布跨越两个表格行的表单答案

【问题标题】：Posting a form spanning two table rows发布跨越两个表格行的表单
【发布时间】：2017-10-25 02:55:53
【问题描述】：

我有一个案例，我创建了一个包含实体的表。第一行是一个可点击的摘要行，每一行都是隐藏的信息行，可以使用输入字段和提交按钮进行扩展，以允许用户更新实体。摘要行有几列。我现在更新这个的解决方案是信息行中的一个表单，输入和一个提交按钮。

Pug 符号描述了一个实体的场景，尽管在现实世界场景中会有更多：

table
  tr.summary
    td.name
      input(type="text",name="name", value="The name")
    td.moreData
      input(type="text",name="moreData", value="testing")
    td.evenMore
  tr.info
    td(cospan=3)
      form(action="api/update/")
        input(type="text",name="customer")
        button(type="submit") Send

我现在的问题是我还想在我的帖子数据的标题行中包含输入。

我还需要说，我已经截获了此提交的正常行为，以允许 JQuery 执行 PUT 请求而不是正常的 POST 并让用户保持在同一页面上。

我的两种解决方案现在如下：

在我的 javascript 拦截代码中，以编程方式包含前行的输入。此解决方案可能需要 1-5 行额外的代码，但会破坏我的 HTML 的语义，因为表单不包含正在发送的所有字段。
更新摘要行中的 HTML，使其只有一行，其中包含包含前一个摘要行和信息行的表格。该解决方案将允许我用表格包装内部表格并保留语义。但它看起来很可怕..

关于哪种解决方案最好的任何建议，或者是否有任何其他可能的解决方案？

【问题讨论】：

在我看来，正确的解决方案是正确地构建您的 HTML，以便所有 input 元素都在 form 内。其他任何东西都是黑客或解决方法。
我在另一个频道上得到了一个关于 HTML5 新属性的提示。该属性在输入元素上，并且是“表单”，它声明它属于哪个表单。我试过了，它似乎工作得很好。希望我以后不会遇到任何问题。
不错。你每天都会学到一些东西。

标签： javascript jquery html forms

【解决方案1】：

我在另一个频道上得到了一个关于 HTML5 新属性的提示。该属性在输入元素上，并且是“表单”，它声明它属于哪个表单。我试过了，它似乎工作得很好。希望我以后不会遇到任何问题。该解决方案不适用于任何版本的 IE，但由于我使用 jQuery 进行发布而不使用本机行为，因此它应该适用于我的场景，但可能不适用于其他场景。

table
  tr.summary
    td.name
      input(type="text",name="name", value="The name", form="entity_1934")
    td.moreData
      input(type="text",name="moreData", value="testing", form="entity_1934")
    td.evenMore
  tr.info
    td(cospan=3)
      form(action="api/update/", id="entity_1934)
        input(type="text",name="customer")
        button(type="submit") Send

【讨论】：