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

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

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

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

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

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

любая помощь будет большое, спасибо.

192
firebug html html-form html-table

3 ответов

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

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

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

302

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

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

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

проблема с обертыванием всей таблицы в форму заключается в том, что все элементы формы будет отправлен на submit (возможно, это желательно, но, вероятно, нет). Этот метод позволяет определить форму для каждой "строки" и отправить только эту строку данных при отправке.

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

25