小编典典

创建一个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验证程序所说的也是如此)。

有什么好办法吗?


阅读 817

收藏
2020-05-10

共1个答案

小编典典

如果你想要一个“编辑网格”,即像结构的表格,可以让你做任何行的形式,使用CSS,模仿表标签的布局:display:tabledisplay: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- grouptable-row-grouptable-footer-group分别。

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

2020-05-10