代码之家 › 专栏 › 技术社区 › Igor Serebryany

HTML:表格?

specifications design-patterns coding-style forms html

6

Igor Serebryany · 技术社区 · 16 年前

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>

这基本上是一个充满表单的表,每行一个表单。点击一次update可以更新特定的行(这不是一个真实的示例,我的实际应用程序确实需要行的独立性)。

<form> 必须是完全在一个 <td> 或者完全在一个 <table>

最后,我创建了一个包含列标题的表,然后为每个表单创建了一个表。但这需要固定的列宽,以使输入在整齐的列中排列,这是低于标准的。你最终如何处理这个问题?有没有一个明显的简单的解决办法我错过了?如何制作表格?

2 回复 | 直到 16 年前

1

6

David Snabel-Caunt 16 年前

这里的技巧是只使用一个表单,例如。

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

假设您有一条id为6的产品蛇。然后为该项目的数量字段quantity[6]命名输入。

我不知道您使用的是什么服务器端语言,但在PHP中,您可以迭代量化并根据ID进行更新。您将得到如下数组:

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

2

15

hultqvist 9 年前

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