表格内的表单-解网

问：

我在 HTML 表格中包含一些表单以添加新行和更新当前行。我遇到的问题是，当我在开发工具中检查表单时，我看到表单元素在打开后立即关闭（输入等不包含在表单中）。

因此，提交表单无法包含字段。

表行和输入如下：

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

任何帮助都会很棒，谢谢。

Firebug HTML 表格表单

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

将整个 TABLE 包装在 FORM 中的问题在于，任何和所有表单元素都将在提交时发送（也许这是需要的，但可能不是）。此方法允许您为每个“行”定义一个表单，并在提交时仅发送该行数据。

将 FORM 标签包裹在 TR 标签（或 TR 包裹在 FORM 周围）的问题在于它是无效的 HTML。FORM 仍将允许像往常一样提交，但此时 DOM 已损坏。注意：尝试使用 JavaScript 获取 FORM 或 TR 的子元素，这可能会导致意外结果。

请注意，IE7 不支持这些 CSS 表格样式，IE8 需要一个 doctype 声明才能使其进入“标准”模式：（试试这个或等效的东西）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

任何其他支持 display：table、display：table-row 和 display：table-cell 的浏览器都应该像使用 TABLE、TR 和 TD 标签一样显示 css 数据表。他们中的大多数人都这样做。

请注意，您还可以模拟 THEAD、TBODY、TFOOT，方法是将行组分别用和包装在另一个 DIV 中。display: table-header-grouptable-row-grouptable-footer-group

注意：使用此方法唯一不能做的是 colspan。

请看这个插图： http://jsfiddle.net/ZRQPP/

customElements.define(
  "my-table",
  class extends HTMLElement {
    constructor() {
      super();
      let template = document.getElementById("my-table");
      let templateContent = template.content;

      const shadowRoot = this.attachShadow({ mode: "open" });
      shadowRoot.appendChild(templateContent.cloneNode(true));
    }
  }
);

为了使用插槽，我们需要使用影子 DOM，这就是为什么我们将影子根附加到自定义元素，它包含模板的内容。

现在我们可以回到 HTML 文件并使用自定义表组件

<my-table>
  <form action="" slot="my-form">
    <input type="text" name="name" id="" />
    <button>Submit</button>
  </form>
</my-table>

上面的表单元素引用了命名的插槽，因此它将被放置在其中。"my-form"

此解决方法有效，因为表单元素未显式放置在表中。窗体只是在 slot 元素中呈现，如下所示：

上一个：Aspnet Ajax如何在表单提交时进行本地刷新

下一个：Sendinblue / Brevo：2个HTML表单相互干扰

表格内的表单

Form inside a table

评论

评论

评论

评论