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