Табличные (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> ... недействительна).

Я подумал: «Эй, у меня могла бы быть одна гигантская форма, обертывающая таблицу, и чтобы значение [кнопка обновления] содержало идентификаторы для каждой строки!» Оказывается, некоторые версии 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>

источник

2010-04-08 detly

Почему бы не обернуть всю таблицу с одним элементом формы, как вы сказали, и вместо того, чтобы назвать каждую группу радиокнопок «присутствия» называют их «присутствие [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 templating, поэтому нет PHP, но возможно тем не менее.) – detly

Мячи, я понятия не имею, почему я предположил, что это PHP. – Sam152

Извините, я почти забыл это принять. Этот подход лучше всего работает с несколькими клиентскими JS и AJAX, чтобы предотвратить перегрузку сервера.В конце концов, я все равно использовал список, но это помогло выяснить, что было разумным или нет. – detly

Табличные (X) HTML-формы

ответ

Смежные вопросы