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

Question

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

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

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

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

<tr>

    <form method="post" action="">

        <td>

            <input type="text" name="job_num">

        </td>



        <td>

            <input type="text" name="desc">

        </td>

    </form>

</tr>

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

655 3

html html-table firebug html-form

3 ответов:

Comments

Ничего не найдено.

Quentin · Accepted Answer · 2016-07-25 17:19:39

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

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

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

Vladimir · Accepted Answer · 2017-03-29 08:43:19

использовать "форма" атрибут, Если вы хотите сохранить разметку:
<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>

Matthew · Accepted Answer · 2016-01-26 18:02:06

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

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