Табличные (X) HTML-формы - PullRequest
Новая
       16

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

4 голосов
/ 08 апреля 2010

У меня есть набор предметов, которые могут находиться в разных состояниях. Я хочу разрешить пользователю использовать (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> 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>

1 Ответ

3 голосов
/ 08 апреля 2010

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

Нет похожих вопросов

...