HTML:表格表格？

Question

我经常发现自己想要创建一个表格表 - 一堆行,每行是一个单独的表单,有自己的字段和提交按钮.例如,这是一个宠物店应用示例 - 想象一下这是一个结账屏幕,您可以选择更新您选择的宠物的数量和属性,并在退房前保存您的更改:

Pet    Quantity Color Variety   Update
snake         4 black rattle    update
puppy         3 pink  dalmatian update

我希望能够使用看起来像这样的HTML来做到这一点:

<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>

这基本上是一个表格,每行一个表格.点击更新一次允许您更新该特定行(这不是一个真实的例子,我的真实应用程序确实需要行的独立性).

但这不是有效的HTML.根据规范,a <form>必须完全位于a <td>或完全位于a之外<table>.这个无效的html打破了javascript库,是一个巨大的痛苦处理.

我最终创建一个表来包含列标题,然后为每个表单创建一个表.但这需要固定的列宽,使输入排列整齐的列,这是低于标准的.你最终如何处理这个问题？我缺少一个明显的简单解决方案吗？如何制作表格表格？

Answer 1

您可以使用css为其他元素提供表格布局.

.table { display: table; } 
.table>* { display: table-row; }
.table>*>* { display: table-cell; }

然后使用以下有效的html.

<div class="table"> 
    <form>
        <div>snake<input type="hidden" name="cartitem" value="55"></div>
        <div><input name="count" value=4/></div>
    </form>
</div>

Answer 2

这里的诀窍是只使用一个表单,例如

    <form>
      <table>
        <!-- rows... -->
      </table>
      <p><input type="submit" value="Update quantity"></p>
    </form>

假设您有一个ID为6的产品蛇.然后,您可以为该项目的数量字段数量命名[6].

我不知道您使用的是哪种服务器端语言,但在PHP中,您可以迭代数量并根据ID进行更新.你会得到一个像这样的数组:

$_POST['quantity'] = array(
    '6' => 4
)