Форма внутри таблицы

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

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

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

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

<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>

Ответ 3

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

Проблема с упаковкой тега FORM вокруг тега TR (или TR вокруг FORM) заключается в том, что он недействителен HTML. FORM по-прежнему будет предоставлять как обычно, но в этот момент 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/