Formar dentro de uma tabela
estou a incluir alguns formulários dentro de uma tabela HTML para adicionar novas linhas e actualizar as linhas actuais. O problema que eu estou recebendo é que quando eu inspecionar os formulários em minhas ferramentas dev, eu vejo que os elementos da forma são fechados imediatamente após a abertura (entradas, etc não estão incluídas no formulário).
como tal, enviar um formulário não inclui os campos.
a linha da tabela e as entradas são as seguintes:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
3 answers
Um formulário é não é permitido ser um elemento filho de um table, tbody ou tr. A tentativa de colocar um lá tenderá a fazer com que o navegador mova o formulário para ele aparece depois de a tabela (deixando o seu conteúdo - linhas de tabela, células de tabela, entradas, etc - para trás).
Utilize um formulário à volta de toda a tabela. Então usa o botão enviar clicado para determinar qual a linha a processar (para ser rápida) ou processar cada linha (permitindo atualizações em massa).
Utilize o atributo "form" , Se quiser gravar a sua marcação:
<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>
Se quiser uma "grelha editável", ou seja, uma estrutura semelhante a uma tabela que lhe permite fazer qualquer uma das linhas um formulário, use o CSS que imita a disposição da marca da tabela: display:table, display:table-row, e display:table-cell
Não há necessidade de embrulhar toda a sua mesa de uma forma e não há necessidade de criar uma forma e uma tabela separadas para cada linha aparente da sua mesa.
Tenta antes isto:
<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>
O problema de embrulhar toda a tabela num formulário é que todos os elementos do formulário serão enviados ao enviar (talvez isso seja desejado, mas provavelmente não). Este método permite-lhe definir um formulário para cada "linha" e enviar apenas essa linha de dados no envio.
O problema de envolver uma etiqueta de formulário em torno de uma tag TR (ou TR em torno de um formulário) é que é HTML inválido. O formulário ainda permitirá submeter como de costume, mas neste momento o DOM está quebrado. Nota: Tente obter os elementos filhos do seu formulário ou TR com JavaScript, ele pode levar a resultados inesperados.
Note que o IE7 não suporta esta tabela CSS styles e IE8 precisarão de uma declaração doctype para colocá - la no modo" standards": (tente este ou algo equivalente)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Qualquer outro navegador que suporte o display: table, display:table-row E display:table-cell deve mostrar a sua tabela de dados css da mesma forma que seria se você estivesse usando a tabela, TR e TD tags. A maioria tem.
Note que você também pode imitar THEAD, TBODY, TFOOT, embrulhando os seus grupos de filas noutro DIV com display: table-header-group, table-row-group e table-footer-group respectivamente.
Nota: a única coisa que não se pode fazer com este método é o colspan.
Vê esta ilustração: http://jsfiddle.net/ZRQPP/