it-swarm.com.ru

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

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

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

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

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

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

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

213
Alex

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

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

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

330
Quentin

Используйте атрибут "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>
170
Vladimir

Если вам нужна "редактируемая сетка", то есть структура, похожая на таблицу, которая позволяет вам сделать любую из строк формой, используйте 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/

32
Matthew