div - title label html
Forma dentro de una mesa (3)
Si desea una "cuadrícula editable", es decir, una estructura similar a una tabla que le permita convertir cualquiera de las filas en un formulario, use CSS que imite el diseño de la etiqueta TABLE: display:table , display:table-row , y display:table-cell .
No es necesario envolver toda la tabla en un formulario y no es necesario crear un formulario y una tabla independientes para cada fila aparente de su tabla.
Intenta esto en su lugar:
<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>
El problema con envolver toda la TABLA en un FORMULARIO es que todos y cada uno de los elementos del formulario se enviarán en el envío (tal vez se desee, pero probablemente no). Este método le permite definir un formulario para cada "fila" y enviar solo esa fila de datos al enviar.
El problema con envolver una etiqueta FORM alrededor de una etiqueta TR (o TR alrededor de una FORMA) es que no es un HTML válido. El FORMULARIO seguirá permitiendo el envío como de costumbre, pero en este punto el DOM está roto. Nota: intente obtener los elementos secundarios de su FORM o TR con JavaScript, puede llevar a resultados inesperados.
Tenga en cuenta que IE7 no admite estos estilos de tabla CSS e IE8 necesitará una declaración doctype para ponerlo en modo "estándar": (intente esto o algo equivalente)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Cualquier otro navegador que admita display: table, display: table-row y display: table-cell debería mostrar su tabla de datos css de la misma manera que lo haría si estuviera usando las etiquetas TABLE, TR y TD. La mayoría de ellos lo hacen.
Tenga en cuenta que también puede imitar THEAD, TBODY, TFOOT envolviendo sus grupos de filas en otro DIV con display: table-header-group , table-row-group y table-footer-group respectivamente.
NOTA: Lo único que no puede hacer con este método es colspan.
Echa un vistazo a esta ilustración: http://jsfiddle.net/ZRQPP/
Estoy incluyendo algunos formularios dentro de una tabla HTML para agregar nuevas filas y actualizar las filas actuales. El problema que tengo es que cuando inspecciono los formularios en mis herramientas de desarrollo, veo que los elementos del formulario se cierran inmediatamente después de abrirse (las entradas, etc. no están incluidas en el formulario).
Como tal, el envío de un formulario no incluye los campos.
La fila de la tabla y las entradas son las siguientes:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>
Cualquier ayuda sería genial, gracias.
Utilice el atributo "formulario" , si desea guardar su marca:
<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>
No se permite que un formulario sea un elemento secundario de una table , tbody o tr . Intentar colocar uno allí hará que el navegador mueva el formulario que aparece después de la tabla (mientras deja sus contenidos: filas de tablas, celdas de tablas, entradas, etc.).
Puedes tener una mesa entera dentro de un formulario. Puede tener un formulario dentro de una celda de tabla. No puede tener parte de una tabla dentro de un formulario.
Use una forma alrededor de toda la mesa. Luego, use el botón de enviar con el clic para determinar qué fila procesar (para ser rápido) o procesar cada fila (permitiendo actualizaciones masivas).