Форма внутри стола - PullRequest
Новая
       32

Форма внутри стола

215 голосов
/ 11 мая 2011

Я включаю некоторые формы в таблицу HTML, чтобы добавлять новые строки и обновлять текущие строки. Проблема, которую я получаю, заключается в том, что когда я проверяю формы в моих инструментах разработки, я вижу, что элементы формы закрываются сразу после открытия (входные данные и т. Д. Не включаются в форму).

Таким образом, отправка формы не включает поля.

Строка и входные данные таблицы следующие: 

<tr>
    <form method="post" action="">
        <td>
            <input type="text" name="job_num">
        </td>

        <td>
            <input type="text" name="desc">
        </td>
    </form>
</tr>

Любая помощь будет отличной, спасибо.

Ответы [ 3 ]

332 голосов
/ 11 мая 2011

Форма не может быть дочерним элементом table, tbody или tr.Попытка поместить его туда приведет к тому, что браузер переместит форму в нее, появляется после таблицы (оставляя после себя ее содержимое - строки таблицы, ячейки таблицы, входные данные и т. Д.).

Вы можете иметь всю таблицу внутри формы.Вы можете иметь форму внутри ячейки таблицы.Вы не можете иметь часть таблицы внутри формы.

Используйте одну форму вокруг всей таблицы.Затем нажмите кнопку «Отправить», чтобы определить, какую строку обрабатывать (чтобы быть быстрой), или обрабатывать каждую строку (разрешая массовые обновления).

173 голосов
/ 07 февраля 2014

Используйте атрибут "form" , если вы хотите сохранить разметку: 

<form method="GET" id="my_form"></form>

<table>
    <tr>
        <td>
            <input type="text" name="company" form="my_form" />
            <button type="button" form="my_form">ok</button>
        </td>
    </tr>
</table>
31 голосов
/ 26 января 2016

Если вам нужна «редактируемая сетка», то есть структура, похожая на таблицу, которая позволяет вам сделать любую из строк формой, используйте CSS, который имитирует макет тега TABLE: display:table, display:table-row и display:table-cell.

Нет необходимости оборачивать всю таблицу в форму и не нужно создавать отдельную форму и таблицу для каждой видимой строки таблицы.

Попробуйте вместо этого: 

<style>
DIV.table 
{
    display:table;
}
FORM.tr, DIV.tr
{
    display:table-row;
}
SPAN.td
{
    display:table-cell;
}
</style>
...
<div class="table">
    <form class="tr" method="post" action="blah.html">
        <span class="td"><input type="text"/></span>
        <span class="td"><input type="text"/></span>
    </form>
    <div class="tr">
        <span class="td">(cell data)</span>
        <span class="td">(cell data)</span>
    </div>
    ...
</div>

Проблема с обертыванием всего TABLE в FORM заключается в том, что любые и все элементы формы будут отправляться при отправке (возможно, это желательно, но, вероятно, нет).Этот метод позволяет вам определять форму для каждой «строки» и отправлять только эту строку данных при отправке.

Проблема с наложением тега FORM вокруг тега TR (или TR вокруг FORM) заключается в том, чтоневерный HTML.ФОРМА будет по-прежнему разрешать отправку как обычно, но на этом этапе DOM не работает.Примечание: попробуйте получить дочерние элементы вашей FORM или TR с помощью JavaScript, это может привести к неожиданным результатам.

Обратите внимание, что IE7 не поддерживает эти стили таблиц CSS, и IE8 потребуется объявление doctype, чтобы получить их вРежим «Стандарт»: (попробуйте этот или что-то эквивалентное) 

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

Любой другой браузер, который поддерживает 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...