html 表格内的表格

zqdjd7g9 于 2023-05-27 发布在其他

关注(0)|答案(4)|浏览(127)

我在HTML表中包含了一些表单，用于添加新行和更新当前行。我遇到的问题是，当我在开发工具中检查表单时，我看到表单元素在打开后立即关闭（输入等不包括在表单中）。
因此，提交表单时无法包含这些字段。
表行和输入如下：

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

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

任何帮助将是伟大的，谢谢你。

Html

来源：https://stackoverflow.com/questions/5967564/form-inside-a-table

4条答案

按热度按时间

cnwbcb6i1#

表单not allowed是table、tbody或tr的子元素。尝试在那里放置一个表单会导致浏览器将表单移动到它出现在表格之后（而将其内容-表格行，表格单元格，输入等-留在后面）。
您可以在表单中包含整个表。您可以在表格单元格中包含表单。不能在窗体中包含表的一部分。
在整个table周围使用一个表格。然后，使用单击的提交按钮来确定要处理哪一行（为了快速），或者处理每一行（允许批量更新）。
HTML 5引入了form * 属性 *。这允许您在表外的每一行提供一个表单，然后使用其id将给定行中的所有表单控件与其中一个表单相关联。

赞(0）回复(0）举报 2023-05-27

qij5mzcb2#

如果要保存标记，请使用**“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 >）

赞(0）回复(0）举报 2023-05-27

tyu7yeag3#

如果你想要一个“可编辑的网格”，即一个类似表格的结构，允许你将任何一行做成一个表单，使用CSS模仿TABLE标签的布局：display:table、display:table-row和display:table-cell。
不需要将整个表 Package 在一个表单中，也不需要为表中的每个明显行创建单独的表单和表。
试试这个：

<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 Package 在一个FORM中的问题是，任何和所有的表单元素都将在提交时发送（这可能是期望的，但可能不是）。此方法允许您为每一“行”定义一个表单，并在提交时仅发送该行数据。
在TR标记周围 Package FORM标记（或在FORM周围 Package TR）的问题是它是无效的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数据表。大多数人都是
请注意，您还可以通过将行组分别用display: table-header-group、table-row-group和table-footer-group Package 在另一个DIV中来模拟THEAD、TBODY、TFOOT。

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

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

赞(0）回复(0）举报 2023-05-27

dkqlctbz4#

尽管如此，作为Quentin mentioned，不允许将表单放入表中。我们可以通过在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));
    }
  }
);

为了使用slots，我们需要使用shadow DOM，这就是为什么我们将shadow root附加到自定义元素，它包含模板的内容。
现在我们可以回到HTML文件并使用自定义表组件

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

上面的表单元素引用了指定的slot "my-form"，因此它将被放置在其中。
这种解决方法之所以有效，是因为表单元素没有显式地放置在表中。表单只是在slot元素中呈现，如下所示：

赞(0）回复(0）举报 2023-05-27

我来回答

html 表格内的表格

4条答案

相关问题

热门标签

最新问答