创建一个HTML表，其中每个TR都是一个FORM

一尘不染

创建一个HTML表，其中每个TR都是一个FORM

html

我正在尝试创建一个表格，其中每一行都是一个表格。我希望每个输入都在不同的表分区中，但是例如，我仍然需要所有所有第一个输入都属于同一个表头，依此类推。

我想做的是一个可编辑的网格 ，或多或少这样：

<table>
    <tr>
        <form method="POST" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
    <tr>
        <form method="POST" action="whatever">
            <td><input type="text"/></td>
            <td><input type="text"/></td>
        </form>
    </tr>
</table>

但是显然我不能以这种方式排列标签（或者w3c验证程序所说的也是如此）。

有什么好办法吗？

阅读 740

2020-05-10

共1个答案

一尘不染

如果你想要一个“编辑网格”，即像结构的表格，可以让你做任何行的形式，使用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>

将整个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，通过包装与另一个DIV你行组TFOOT display: table-header- group，table-row-group和table-footer-group分别。

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

2020-05-10