表格（X）HTML表格

我有一組可以處於各種狀態的項目。我想，以允許用戶使用一個（X）HTML表單表格（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> ...無效）。

我想，「嘿，我可以有一個巨大的表格封裝一個表格，並使[update button]值包含每行的ID！」發現某些版本的IE在任何一個表單上發送所有提交按鈕值。

所以我想也許要把它與<div> s放在一起，並把表格放在一個單一的<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>

來源

2010-04-08 detly

爲什麼不與一個形式元件包住整個表，如你所說和代替命名每個組的單選按鈕「存在」命名爲「存在[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

來源

2010-04-08 06:27:31 Sam152

有趣的方法，但如果有說20個項目每個頁面和一個更新，服務器必須處理20倍的未更改數據。不過，多次更新可能是一個好處。（另外，它是一個CherryPy後端+ Cheetah模板，所以沒有PHP，但可能仍然存在。） – detly 2010-04-08 07:02:10

Balls，我不知道爲什麼我認爲它是PHP。 – Sam152 2010-04-08 07:36:44

對不起，我差點忘了接受這個。這種方法最適合於一些客戶端JS和AJAX，以防止服務器過度使用。畢竟，我最終使用了一個列表框，但這有助於弄清楚什麼是合理的或不合理的。 – detly 2010-04-26 09:55:54

表格（X）HTML表格

回答

相關問題