Я включаю некоторые формы в таблицу HTML, чтобы добавить новые строки и обновить текущие строки. Проблема, которую я получаю, заключается в том, что когда я проверяю формы в моих инструментах разработки, я вижу, что элементы формы закрываются сразу после открытия (входные данные и т. Д. Не включаются в форму).
Таким образом, отправка формы не включает поля.
Строка таблицы и входные данные выглядят следующим образом:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
Любая помощь будет отличной, спасибо.
html
firebug
html-table
forms
Alex
источник
источник
<form>
нельзя положить внутрь<tr>
.<tr>
.Ответы:
Форма это не разрешено быть дочерним элементом
table
,tbody
илиtr
. Попытка поместить его туда приведет к тому, что браузер переместит форму, чтобы она появилась после таблицы (оставляя после себя ее содержимое - строки таблицы, ячейки таблицы, входные данные и т. Д.).Вы можете иметь всю таблицу внутри формы. Вы можете иметь форму внутри ячейки таблицы. Вы не можете иметь часть таблицы внутри формы.
Используйте одну форму вокруг всей таблицы. Затем либо используйте нажатую кнопку отправки, чтобы определить, какую строку обрабатывать (чтобы быть быстрой), либо обрабатывать каждую строку (разрешая массовые обновления).
HTML 5 вводит
form
атрибут . Это позволяет вам предоставить одну форму на строку за пределами таблицы, а затем связать все элементы управления формы в данной строке с одной из этих форм, используя ееid
.источник
<form>
внутри запрещено<table>
в стандартах?Используйте атрибут form , если вы хотите сохранить свою разметку:
(* Поля формы вне тега <form>)
Также смотрите первые 2 комментария
источник
Если вы хотите «редактируемую сетку» , т.е. таблицы как структура , которая позволяет сделать любого из строк формы, использование CSS , который имитирует расположение за столом тега:
display:table
,display:table-row
, иdisplay:table-cell
.Нет необходимости оборачивать всю таблицу в форму и не нужно создавать отдельную форму и таблицу для каждой видимой строки таблицы.
Попробуйте это вместо этого:
Проблема с обертыванием всего TABLE в FORM заключается в том, что любые и все элементы формы будут отправлены при отправке (возможно, это желательно, но, вероятно, нет). Этот метод позволяет вам определять форму для каждой «строки» и отправлять только эту строку данных при отправке.
Проблема с обертыванием тега FORM вокруг тега TR (или TR вокруг FORM) заключается в том, что это недопустимый HTML. ФОРМА будет по-прежнему разрешать отправку как обычно, но на этом этапе DOM не работает. Примечание: попробуйте получить дочерние элементы вашей FORM или TR с помощью JavaScript, это может привести к неожиданным результатам.
Обратите внимание, что IE7 не поддерживает эти стили таблиц CSS, и IE8 потребуется объявление doctype, чтобы перевести его в режим «стандартов»: (попробуйте этот или что-то эквивалентное)
Любой другой браузер, который поддерживает display: table, display: table-row и display: table-cell, должен отображать вашу таблицу данных CSS так же, как если бы вы использовали теги TABLE, TR и TD. Большинство из них делают.
Обратите внимание , что вы также можете имитировать THEAD, TBODY, TFOOT, обернув свои группы строк в другой DIV с
display: table-header-group
,table-row-group
иtable-footer-group
соответственно.ПРИМЕЧАНИЕ . Единственное, что вы не можете сделать с помощью этого метода, это colspan.
Проверьте эту иллюстрацию: http://jsfiddle.net/ZRQPP/
источник