HTML：表格？ [英] HTML: table of forms?

问题描述

我经常发现自己想创建一个表格 - 一堆行，每一行都是一个单独的表单，它有自己的字段和提交按钮。例如，这里有一个宠物店应用程序示例 - 假设这是一个结帐屏幕，您可以选择更新您选择的宠物的数量和属性，并在签出前保存您的更改：

 宠物数量颜色种类更新
 snake 4黑色拨浪鼓更新
小狗3粉红色达尔马提亚人更新
  
 
 
 
我希望能够使用类似这样的HTML：
 < table> 
< thead>< tr>< th> Pet< / th> < th>数量< / th> < th>颜色< / th> < th> Variety< / th> < th> Update< / th>< / tr>< / thead> 
< tbody> 
< tr> 
< form> 
< td> snake< input type =hiddenname =cartitemvalue =55>< / td> 
< td>< input name =countvalue = 4 />< / td> 
< td>< select name =color>< / select>< / td> 
< td>< select name =variety>< / select>< / td> 
< td>< input type =submit>< / td> 
< / form> 
< / tr> 
< / tbody> 
< / table> 
  
这基本上是一个表格，每行一个表格。点击更新一次允许你更新那个特定的行（这不是一个真正的例子，我真正的应用程序真的需要独立的行）。
 
 
 
但这是无效的HTML 。根据规范，< form> 必须完全在< td>  < table> 。这个无效的html打破了JavaScript库，是一个巨大的痛苦来处理。 
 
 
 
我最后使一个表包含列标题，然后为每个表单创建一个表。但是这需要固定的列宽度来使输入排列在整齐的列中，这是次级的。你最终如何处理这个问题？有没有一个明显的简单的解决方案，我错过了？ 
解决方案
这里的诀窍只是使用一个表单，例如
 < form> 
< table> 
<！ -  rows ...  - > 
< / table> 
< p>< input type =submitvalue =更新数量>< / p> 
< / form> 
  
假设您有一个ID为6的产品蛇。然后命名该产品的数量字段数量的输入[6]。
 
 
 
我不知道你使用什么服务器端语言，但是在PHP中，你可以迭代定量和更新基于ID。你会得到一个这样的数组：
  $ _ POST ['quantity'] = array（
'6' => 4 
）
  
 
I frequently find myself wanting to make a table of forms -- a bunch of rows, each row being a separate form with its own fields and submit button. For instance, here's an example pet shop application -- imagine this is a checkout screen which gives you the option to update the quantities and attributes of the pets you've selected and save your changes before checking out:
Pet    Quantity Color Variety   Update
snake         4 black rattle    update
puppy         3 pink  dalmatian update
I would love to be able to do this using HTML that looks like this:
<table> 
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead>
<tbody>
     <tr>
          <form>
            <td>snake<input type="hidden" name="cartitem" value="55"></td>
            <td><input name="count" value=4/></td>
            <td><select name="color"></select></td>
            <td><select name="variety"></select></td>
            <td><input type="submit"></td>
          </form>
     </tr>
</tbody>
</table>
This is basically a table full of forms, one form per row. Hitting update once allows you to update that specific row (this is not a real example, my real applications really do require independence of rows).

But this is not valid HTML. According to spec, a <form> has to be either completely inside a <td> or completely outside a <table>. This invalid html breaks javascript libraries and is a huge pain to deal with. 

I end up making one table to contain column headings, and then making one table per form. But this requires fixed column widths to have the inputs lined up in neat columns, which is sub-par. How do you end up dealing with this problem? Is there an obvious easy solution I'm missing? How to I make a table of forms?
解决方案
The trick here is to just use a single form, e.g.
    <form>
      <table>
        <!-- rows... -->
      </table>
      <p><input type="submit" value="Update quantity"></p>
    </form>
Say you have a product snake with id 6. You then name the input for that item's quantity field quantity[6].

I don't know what server side language you are using, but in PHP you can then iterate over the quantites and update based on the ID. You'd get an array like this:
$_POST['quantity'] = array(
    '6' => 4
)


                        
这篇关于HTML：表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！