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

Question

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

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

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

但显然我无法以这种方式安排标签（或者w3c验证器所说的那样）。

有什么好办法吗？

如答案中讨论的，似乎更好的选择是使用某种AJAX来做到这一点。以下问题包含一组jQuery网格插件，将使您能够做所需; 希望你觉得这有帮助。stackoverflow.com/questions/159025/jquery-grid-recommendatio ns — Waleed Al-Balooshi, 十月27 '10在17:54
一个类似的问题stackoverflow.com/questions/5967564/form-inside-a-table有很好的答案。 — Sanghyun Lee, Jun 22 '16 at 5:08

马修 · Accepted Answer · 2014-05-05 11：44：26Z

如果你想要一个“编辑网格”，即像结构的表格，可以让你做任何行的形式，使用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中的问题是，任何和所有表单元素都将在提交时发送（也许这是所需但可能不是）。此方法允许您为每个“行”定义一个表单，并在提交时仅发送该行数据。

在TR标签（或围绕FORM）周围缠绕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">

支持显示的任何其他浏览器：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。

看看这个例子：http : //jsfiddle.net/ZRQPP/

谢谢！这节省了我的一天 - eskatos 4月28日'15在15:43 — eskatos, 4月28日'15在15:43

肖恩维埃拉 · Answer 2 · 2010-10-27 17：52：19Z

如果所有这些行都相关，并且您需要更改表格数据...为什么不只是将整个表格包装在一个表单中，并更改GET为POST（除非你知道你不会发送超过最大数量的GET请求可以发送的数据）。

（这是假设，当然，所有的数据都是在同一个地方。）

<form method="POST" action="your_action">
<table>
<tr>
<td><input type="text" name="r1c1" value="" /></td>
<!-- ... snip ... -->
</tr>
<!-- ... repeat as needed ... -->
</table>
</form>

如果我正确理解你，你正在尝试制作一个数据网格，既可以显示现有数据，也可以启用编辑/数据输入。最好的办法是使用javascript来创建和构建这个datagrid - 有很多好的。 — Sean Vieira, 10月27日10点17时54分

礼 · Answer 3 · 2010-10-27 17：47：08Z

您可能有列宽问题，但您可以明确设置。

<table>
  <tr>
    <td>
       <form>
         <table>
           <tr>
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
           </tr>
         </table>
       </form>
     </td>
    </tr>
  <tr>
    <td>
       <form>
         <table>
           <tr>
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
             <td></td> 
           </tr>
         </table>
       </form>
     </td>
    </tr>
  </table>

您可能还想考虑使其成为单一形式，然后使用jQuery从所需行中选择表单元素，将其序列化，并以表单形式提交。

请参阅：http : //api.jquery.com/serialize/

此外，还有一些非常好的网格插件：http : //www.google.com/search? q = jquery+grid&ie = utf-8&oe = utf-8&aq = t&rls = org.mozilla:en-US:official&client =火狐-A

是的，这个问题可能是一个错误的做法的一个症状，但似乎我们应该回答这个问题，除了褴褛。 — Eli, 十月27 '10在17:45
实际上，这是一个有效的标记，就像我不会使用它一样。 — Eli, Oct 28 '10 at 0:12

NisseEngström · Answer 4 · 2017-01-06 11：04：54Z

如果使用JavaScript是一个选项，并且您想避免嵌套表，请包括jQuery并尝试以下方法。

首先，你必须给每行一个唯一的ID：

<table>
  <tr id="idrow1"><td> ADD AS MANY COLUMNS AS YOU LIKE  </td><td><button onclick="submitRowAsForm('idrow1')">SUBMIT ROW1</button></td></tr>
  <tr id="idrow2"><td> PUT INPUT FIELDS IN THE COLUMNS  </td><td><button onclick="submitRowAsForm('idrow2')">SUBMIT ROW2</button></td></tr>
  <tr id="idrow3"><td>ADD MORE THAN ONE INPUT PER COLUMN</td><td><button onclick="submitRowAsForm('idrow3')">SUBMIT ROW3</button></td></tr>
</table>

然后，在您的页面的JavaScript中包含以下函数。

<script>
function submitRowAsForm(idRow) {
  form = document.createElement("form"); // CREATE A NEW FORM TO DUMP ELEMENTS INTO FOR SUBMISSION
  form.method = "post"; // CHOOSE FORM SUBMISSION METHOD, "GET" OR "POST"
  form.action = ""; // TELL THE FORM WHAT PAGE TO SUBMIT TO
  $("#"+idRow+" td").children().each(function() { // GRAB ALL CHILD ELEMENTS OF <TD>'S IN THE ROW IDENTIFIED BY idRow, CLONE THEM, AND DUMP THEM IN OUR FORM
        if(this.type.substring(0,6) == "select") { // JQUERY DOESN'T CLONE <SELECT> ELEMENTS PROPERLY, SO HANDLE THAT
            input = document.createElement("input"); // CREATE AN ELEMENT TO COPY VALUES TO
            input.type = "hidden";
            input.name = this.name; // GIVE ELEMENT SAME NAME AS THE <SELECT>
            input.value = this.value; // ASSIGN THE VALUE FROM THE <SELECT>
            form.appendChild(input);
        } else { // IF IT'S NOT A SELECT ELEMENT, JUST CLONE IT.
            $(this).clone().appendTo(form);
        }

    });
  form.submit(); // NOW SUBMIT THE FORM THAT WE'VE JUST CREATED AND POPULATED
}
</script>

那么我们在这里做了什么呢？我们给每行一个唯一的ID，并在行中包含一个可以触发该行的唯一标识符提交的元素。当提交元素被激活时，动态地创建并设置一个新的表单。然后使用jQuery，我们克隆<td>我们传递的行中包含的所有元素，并将克隆附加到动态创建的表单中。最后，我们提交表格。

我尝试了这种方法，但是我使用ajax请求，所以现在所有这些行都被附加在我的表的底部。试图找出隐藏这些的方法。 — rii, Oct 21 '15 at 19:25
好建议！为了使代码在FireFox中工作，我不得不form.style.display = "none"; document.body.appendChild(form);在form.submit（）之前添加; 并确保使用相同的var idRow而不是id。 — ISQ, 6月5日16时17分42分

德米特里·辛佐佐 · Answer 5 · 2012-08-23 06：25：20Z

如果所有这些行都是相关的，并且您需要更改表格数据...为什么不将整个表包装在一个表单中，并将GET更改为POST（除非您知道您不会发送多于GET请求可以发送的最大数据量）。

我不能用整个表格包装，因为每一行的一些输入字段都输入了type =“file”，文件可能很大。当用户提交表单时，我想仅POST当前行的字段，而不是所有行中可能不需要大量文件的所有字段，导致表单提交速度非常慢。

所以，我尝试错误的嵌套：tr / form和form / tr。但是，它只有在不尝试在表单中动态添加新输入时才有效。动态添加的输入不会属于错误的嵌套表单，因此不会被提交。（有效的表格/表动态输入提交正常）。

嵌套div [display：table] / form / div [display：table-row] / div [display：table-cell]产生网格列的不均匀宽度。当我替换div [display：table-row]形成[display：table-row]时，我设法得到了统一的布局：

div.grid {
    display: table;
}

div.grid > form {
    display: table-row;


div.grid > form > div {
    display: table-cell;
}
div.grid > form > div.head {
    text-align: center;
    font-weight: 800;
}

为了在IE8中正确显示布局：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10" />

输出样本：

<div class="grid" id="htmlrow_grid_item">
<form>
    <div class="head">Title</div>
    <div class="head">Price</div>
    <div class="head">Description</div>
    <div class="head">Images</div>
    <div class="head">Stock left</div>
    <div class="head">Action</div>
</form>
<form action="/index.php" enctype="multipart/form-data" method="post">
    <div title="Title"><input required="required" class="input_varchar" name="add_title" type="text" value="" /></div>

然而，在IE6 / 7中使这个代码工作起来会更加困难。

Racky · Answer 6 · 2013-03-06 06：47：05Z

如果您可以使用JavaScript并严格要求您在网络上，您可以在表的每一行和每一行位置按钮（或类rowSubmit的链接）“保存”中放置文本框，复选框和任何内容。没有任何FORM标签。形式比JS和Ajax模拟的这样：

<script type="text/javascript">
$(document).ready(function(){
  $(".rowSubmit").click(function()
  {
     var form = '<form><table><tr>' + $(this).closest('tr').html() + '</tr></table></form>';
     var serialized = $(form).serialize(); 
     $.get('url2action', serialized, function(data){
       // ... can be empty
     }); 
   });
});        
</script>

你怎么看？

PS：如果你在jQuery这样写：

$("valid HTML string")
$(variableWithValidHtmlString)

它将被转换成jQuery对象，你可以像在jQuery中一样使用它。

PS：如果通过JavaScript动态添加行，如果定义如图所示，事件“点击”将不起作用。在这种情况下，通过jQuery.live（）或jQuery.on（）定义事件 — Racky, Mar 6 '13 at 7:08

Harmen · Answer 7 · 2010-10-27 17：36：48Z

向上投1向下票

表不是为此，为什么不使用<div>和CSS？

分享	于10月27日10时17分36分回答 Harmen 16.1k23968

28

表不代表表格数据？我试图做一个可编辑的网格。 - vtortola 十月27 '10在17:39

1

@vtortola的关键词是“数据”。在您的示例中，您正在使用它来控制输入表单布局，而不向最终用户呈现数据。也许如果你解释了表的目的，那么推荐一些替代方案会更容易。 - Waleed Al-Balooshi 10月27日10点17时41分

3

可编辑的数据网格 - vtortola 十月27 '10在17:41

3

我看到的可编辑网格的大部分内容都是使用一个表格包裹的表格，然后每一行都可能有一个保存按钮，它将一个密钥传递给提交操作（或使用ajax，表单submit并不意味着什么）。 - 普雷斯科特 10月27日10时17分43分

1

你正在收集数据，正如我在晚期的答复中写的那样。你以后是display: table-cell;，太糟糕的旧IE仍然在那里... - FelipeAls Oct 27 '10 at 17:43

显示1条评论

普雷斯科特 · Answer 8 · 2010-10-27 17：39：15Z

我第二次哈桑的提议。或者，您可以使用表单包装表格，并使用javascript捕获行焦点，并在提交之前通过javascript调整表单操作。

NotQuiteAPro · Answer 9 · 2013-10-29 02：02：17Z

我有一个类似于原来问题的问题。我感兴趣的divs风格的表元素（不知道你可以做到！），并给它一个运行。但是，我的解决方案是将我的表包装在标签中，但是重命名每个输入和选择选项以成为数组的键，我现在正在解析以获取所选行中的每个元素。

这是表中的一行。请注意，key [4]是从中检索此表行的数据库中的行的呈现ID

<table>
  <tr>
    <td>DisabilityCategory</td>
    <td><input type="text" name="FormElem[4][ElemLabel]" value="Disabilities"></td>
    <td><select name="FormElem[4][Category]">
        <option value="1">General</option>
        <option value="3">Disability</option>
        <option value="4">Injury</option>
        <option value="2"selected>School</option>
        <option value="5">Veteran</option>
        <option value="10">Medical</option>
        <option value="9">Supports</option>
        <option value="7">Residential</option>
        <option value="8">Guardian</option>
        <option value="6">Criminal</option>
        <option value="11">Contacts</option>
      </select></td>
    <td>4</td>
    <td style="text-align:center;"><input type="text" name="FormElem[4][ElemSeq]" value="0" style="width:2.5em; text-align:center;"></td>
    <td>'ccpPartic'</td>
    <td><input type="text" name="FormElem[4][ElemType]" value="checkbox"></td>
    <td><input type="checkbox" name="FormElem[4][ElemRequired]"></td>
    <td><input type="text" name="FormElem[4][ElemLabelPrefix]" value=""></td>
    <td><input type="text" name="FormElem[4][ElemLabelPostfix]" value=""></td>
    <td><input type="text" name="FormElem[4][ElemLabelPosition]" value="before"></td>
    <td><input type="submit" name="submit[4]" value="Commit Changes"></td>
  </tr>
</table>

然后，在PHP中，我使用以下方法将数组（$ SelectedElem）存储在与提交按钮对应的行中的每个元素。我print_r()只是用来说明：

$SelectedElem = implode(",", array_keys($_POST['submit']));
print_r ($_POST['FormElem'][$SelectedElem]);

也许这听起来很复杂，但事实证明是相当简单的，它保留了表的组织结构。

这种方法的缺点是自动完成将为每行保留单独的列表，这可能不是一个大问题，只是为最终用户困惑。另外，以一批行的形式提交可能会破坏服务器的post_max_limit，这在PHP中意味着它丢弃数据。如果您的界面允许用户向表中添加行，那么这可能是一个严重的问题。 — 彼得·品牌, Aug 10 '15 at 10:47

FelipeAls · Answer 10 · 2010-10-27 17：41：54Z

这是很简单的，没有使用一个表的标记，如Harmen所述。您完全不显示数据，您正在收集数据。

我会举个例子23这里的问题：http : //accessible.netscouts-ggmbh.eu/en/developer.html#fb1_22_5

在纸上，它是好的，因为它是。如果你必须显示结果，那可能就可以了。
但是您可以用...标签替换4段，并选择（选项将是第一行的标题）。每行一段，这是更简单的。

表格是HTML中的复杂东西。一个形式也当有更简单的解决方案时，我不会试图玩两者，这是两个世界更糟糕的秘诀。而我并不是在谈论一个网格（视觉的东西），display: table-cell;而是（或者应该是）这个元素表，而在HTML中是有限制的。 — FelipeAls, 10月27日10点18时32分

You are here

Form inside a table form 不能作为 table 的子元素

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

来自 https://stackoverflow.com/questions/4035966/create-a-html-table-where-each-tr-is-a-form

友情链接

搜索表单

用户登录

You are here

Form inside a table form 不能作为 table 的子元素

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

你觉得这个问题有趣吗？尝试我们的通讯

来自 https://stackoverflow.com/questions/4035966/create-a-html-table-where-each-tr-is-a-form

友情链接