Question

我有一组可以处于不同状态的项目。我想允许用户使用（X）HTML表单

更改状态，
轻松查看一组对象的状态

...所以为此，我想要一个像：

这样的布局

| item1 | radio button for state 1 | radio for state 2 | ... | [update button] |
| item2 | radio button for state 1 | radio for state 2 | ... | [update button] |

等。我更喜欢单选按钮来列出框，以便用户可以直观地扫描特定状态的内容。

这对我来说似乎是完美的表格数据。唯一的问题是，您不能在表格中包含跨表格单元格的表单（即。<tr> <form> <td> ...无效）。

我想，“嘿，我可以用一个包裹表格的巨型表格，并使[更新按钮]值包含每行的ID！”原来IE的某些版本在任何单一表格上发送所有提交按钮值。

所以我想或许要用<div>来解决它并将表单放在一个<td>内。但随后他们在每个<div>上划了一条线。所以我修正了它们的宽度并使它们成为float: left。但是如果表格行比页面宽，它们会包裹在表格单元格中，并且无线电控件不与标题对齐。

是否有可能按照我的意图来解决这个问题？下面的XHTML显示了预期的结构。观察如果您将浏览器窗口的大小调整到表格宽度以下会发生什么（理想情况下，名称会中断，或者表格会显示滚动条）。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Test</title>

<style type="text/css">

.state-select, .thing-state-name, .update {
    float: left;
    width: 8em;
}

.state-select {
    text-align: center;
}

</style>

</head>

<body>

<table>

<thead>

<tr>
<th class="thing-name-header">Thing</th>

<th>
<div class="thing-state-name">Present</div>
<div class="thing-state-name">Absent</div>
<div class="thing-state-name">Haven't looked</div>
</th>

</tr>
</thead>

<tbody>

<tr>
<td>Apple</td>

<td>
<form action="something" method="post">

<input type="hidden" name="id" value="1" />

<div class="state-select"><input type="radio" name="presence" value="present" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div>
<div class="update"><input type="submit" value="Update" /></div>

</form>

</td></tr>

<tr>

<td>Orange</td>

<td>
<form action="something" method="post">

<input type="hidden" name="id" value="2" />

<div class="state-select"><input type="radio" name="presence" value="present" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" /></div>
<div class="update"><input type="submit" value="Update" /></div>

</form>

</td></tr>

<tr>

<td>David Bowie</td>

<td>
<form action="something" method="post">

<input type="hidden" name="id" value="3" />

<div class="state-select"><input type="radio" name="presence" value="present" /></div>
<div class="state-select"><input type="radio" name="presence" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence" value="unknown" checked="checked" /></div>
<div class="update"><input type="submit" value="Update" /></div>

</form>

</td></tr>

</tbody>

</table>

</body>
</html>

Answer 1

为什么不用正如你所说的那样用一个表单元素包装整个表，而不是命名每组单选按钮“presence”将它们命名为“presence [ID]”，其中ID是你要更新的行的ID。例如：

<div class="state-select"><input type="radio" name="presence[0]" value="ipresent" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence[0]" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence[0]" value="unknown" /></div>
<div class="update"><input type="submit" value="Update" /></div>

...

<div class="state-select"><input type="radio" name="presence[1]" value="present" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence[1]" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence[1]" value="unknown" /></div>
<div class="update"><input type="submit" value="Update" /></div>

然后，您可以使用PHP轻松遍历每组单选按钮并轻松更新所有字段。我测试了下面的代码以及上面的代码，它运行得很好。

<?
foreach($_POST['presence'] as $id => $value){
    echo "ID ".$id." is ". $value . "<br>";
    //Run your update code with the variables $id and $value
}
?>

使用您提供的代码实现这一点看起来像这样：

<?

if(isset($_POST['update'])){
    foreach($_POST['presence'] as $id => $value){
        echo "ID ".$id." is ". $value . "<br>";
        //Run your update code with the variables $id and $value
    }
} ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title>Test</title>

<style type="text/css">

.state-select, .thing-state-name, .update {
    float: left;
    width: 8em;
}

.state-select {
    text-align: center;
}

</style>

</head>

<body>

<form method="post">
<table>

<thead>

<tr>
<th class="thing-name-header">Thing</th>

<th>
<div class="thing-state-name">Present</div>
<div class="thing-state-name">Absent</div>
<div class="thing-state-name">Haven't looked</div>
</th>

</tr>
</thead>

<tbody>

<tr>
<td>Apple</td>

<td>

<div class="state-select"><input type="radio" name="presence[1]" value="present" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence[1]" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence[1]" value="unknown" /></div>
<div class="update"><input type="submit" name="update" value="Update" /></div>

</td></tr>

<tr>

<td>Orange</td>

<td>

<div class="state-select"><input type="radio" name="presence[2]" value="present" /></div>
<div class="state-select"><input type="radio" name="presence[2]" value="absent" checked="checked" /></div>
<div class="state-select"><input type="radio" name="presence[2]" value="unknown" /></div>
<div class="update"><input type="submit" name="update" value="Update" /></div>
</td></tr>

<tr>

<td>David Bowie</td>

<td>

<div class="state-select"><input type="radio" name="presence[3]" value="present" /></div>
<div class="state-select"><input type="radio" name="presence[3]" value="absent" /></div>
<div class="state-select"><input type="radio" name="presence[3]" value="unknown" checked="checked" /></div>
<div class="update"><input type="submit" name="update" value="Update" /></div>

</td></tr>

</tbody>

</table>
</form>

</body>
</html>

提交表格会给你：

ID 1 is present
ID 2 is absent
ID 3 is unknown

表格（X）HTML表单

1 个答案: