表格内的表格

发布于 2024-11-06 17:09:12 字数 438 浏览 3 评论 0原文

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

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

表行和输入如下：

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

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

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

原文

I'm including some forms inside a HTML table to add new rows and update current rows. The problem that I'm getting is that when I inspect the forms in my dev tools, I see that the form elements are closed immediately after opening (inputs, etc are not included within the form).

As such, submitting a form fails to include the fields.

The table row and inputs are as follows:

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

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

Any help would be great, thank you.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

绝情姑娘 2024-11-13 17:09:12

表单不允许成为table的子元素，tbody 或 tr。尝试将其放置在那里往往会导致浏览器将表单移动到表格之后（同时将其内容 - 表格行、表格单元格、输入等 - 留在后面）。

您可以在表单中包含整个表格。您可以在表格单元格内放置一个表单。表格中不能包含表格的一部分。

在整个表格中使用一种表格。然后使用单击的提交按钮来确定要处理哪一行（要快速）或处理每一行（允许批量更新）。

HTML 5 引入了 form < em>属性。这允许您在表外每行提供一个表单，然后使用其id将给定行中的所有表单控件与其中一个表单关联起来。

回复收藏 0 原文

萌逼全场 2024-11-13 17:09:12

如果您想保存标记，请使用“form”属性：

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

（*< form > 标记之外的表单字段）

兼容性：https://caniuse.com/form-attribute

Use the "form" attribute, if you want to save your markup:

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>

(*Form fields outside of the < form > tag)

Compatibility: https://caniuse.com/form-attribute

回复收藏 0 原文

哀由 2024-11-13 17:09:12

如果您想要一个“可编辑网格”，即类似表格的结构，允许您将任何行设为表单，请使用模仿 TABLE 标记布局的 CSS： display:table, display: table-row 和 display:table-cell。

无需将整个表格包装在一个表单中，也无需为表格的每个明显行创建单独的表单和表格。

尝试这样做：

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

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

将 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 应该显示你的 CSS 数据表，就像你使用 TABLE、TR 和 TD 标签一样。他们中的大多数人都这样做。

请注意，您还可以通过使用 display: table-header-group、table-row-group 和 将行组包装在另一个 DIV 中来模仿 THEAD、TBODY、TFOOT >table-footer-group 分别。

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

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

If you want a "editable grid" i.e. a table like structure that allows you to make any of the rows a form, use CSS that mimics the TABLE tag's layout: display:table, display:table-row, and display:table-cell.

There is no need to wrap your whole table in a form and no need to create a separate form and table for each apparent row of your table.

Try this instead:

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

The problem with wrapping the whole TABLE in a FORM is that any and all form elements will be sent on submit (maybe that is desired but probably not). This method allows you to define a form for each "row" and send only that row of data on submit.

The problem with wrapping a FORM tag around a TR tag (or TR around a FORM) is that it's invalid HTML. The FORM will still allow submit as usual but at this point the DOM is broken. Note: Try getting the child elements of your FORM or TR with JavaScript, it can lead to unexpected results.

Note that IE7 doesn't support these CSS table styles and IE8 will need a doctype declaration to get it into "standards" mode: (try this one or something equivalent)

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

Any other browser that supports display:table, display:table-row and display:table-cell should display your css data table the same as it would if you were using the TABLE, TR and TD tags. Most of them do.

Note that you can also mimic THEAD, TBODY, TFOOT by wrapping your row groups in another DIV with display: table-header-group, table-row-group and table-footer-group respectively.

NOTE: The only thing you cannot do with this method is colspan.

Check out this illustration: http://jsfiddle.net/ZRQPP/

回复收藏 0 原文

如若梦似彩虹 2024-11-13 17:09:12

尽管如此，正如 Quentin 提到的，不允许将表单放入表格中。我们可以使用 Web 组件中使用的插槽来解决此限制。

首先，我们需要在 HTML 文件中创建表格模板：

<template id="my-table">
  <table>
    <tr>
      <td>first column</td>
      <td>second column <slot name="my-form"></slot></td>
      <td>third column</td>
    </tr>
  </table>
</template>

slot 元素是一个插入点，具有属性 slot="my-form" 的元素将在其中呈现。

然后我们在JS中定义一个自定义组件：

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));
    }
  }
);

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

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

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

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

此解决方法之所以有效，是因为表单元素未显式放置在表内。该表单简单地呈现在槽元素内，如下所示：

Even though, as Quentin mentioned, it is not allowed to put a form inside a table. We can workaround this limitation with slots which are used in web components.

First of all we need to create a template of our table in our HTML file:

<template id="my-table">
  <table>
    <tr>
      <td>first column</td>
      <td>second column <slot name="my-form"></slot></td>
      <td>third column</td>
    </tr>
  </table>
</template>

The slot element is an insertion point, elements with attribute slot="my-form" will be rendered inside of it.

Then we define a custom component in JS:

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));
    }
  }
);

In order to use slots we need to use shadow DOM, that's why we attach a shadow root to the custom element, it contains the content of the template.

Now we can go back to the HTML file and use the custom table component

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

The above form element references the named slot "my-form", therefore it will be placed inside of it.

This workaround works because the form element isn't explicitly placed inside the table. The form is simply rendered inside the slot element as shown here: