imagenes - tablas en html5
Crea una tabla HTML donde cada TR es un FORMULARIO (10)
Intento crear una tabla donde cada fila sea una forma. Quiero que cada entrada esté en una división de tabla diferente, pero todavía necesito eso, por ejemplo, todas las primeras entradas pertenecen al mismo cabezal de tabla, y así sucesivamente.
Lo que intento hacer es una grilla editable , más o menos esto:
<table>
<tr>
<form method="GET" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
<tr>
<form method="GET" action="whatever">
<td><input type="text"/></td>
<td><input type="text"/></td>
</form>
</tr>
</table>
Pero aparentemente no puedo organizar las etiquetas de esa manera (o eso es lo que dijo el validador w3c).
¿Alguna buena forma de hacer esto?
Si todas estas filas están relacionadas y necesita modificar los datos tabulares ... ¿por qué no simplemente envolver toda la tabla en un formulario y cambiar GET a POST (a menos que sepa que no va a enviar más que el cantidad máxima de datos que puede enviar una solicitud GET).
No puedo envolver toda la tabla en un formulario, porque algunos campos de entrada de cada fila son de tipo de entrada = "archivo" y los archivos pueden ser grandes. Cuando el usuario envía el formulario, quiero PUBLICAR solo los campos de la fila actual, no todos los campos de todas las filas que pueden tener archivos enormes innecesarios, lo que hace que el formulario se envíe muy lentamente.
Entonces, intenté anidar incorrectamente: tr / form y form / tr. Sin embargo, solo funciona cuando no se intenta agregar nuevas entradas dinámicamente en el formulario. Las entradas añadidas dinámicamente no pertenecerán a un formulario incorrectamente anidado, por lo que no se enviarán. (las entradas de forma / tabla válidas dinámicamente se envían muy bien).
Nesting div [display: table] / form / div [display: table-row] / div [display: table-cell] produjo anchos no uniformes de columnas de grillas. Logré obtener un diseño uniforme cuando reemplacé div [display: table-row] en form [display: table-row]:
div.grid {
display: table;
}
div.grid > form {
display: table-row;
div.grid > form > div {
display: table-cell;
}
div.grid > form > div.head {
text-align: center;
font-weight: 800;
}
Para que el diseño se muestre correctamente en IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
...
<meta http-equiv="X-UA-Compatible" content="IE=8, IE=9, IE=10" />
Muestra de salida:
<div class="grid" id="htmlrow_grid_item">
<form>
<div class="head">Title</div>
<div class="head">Price</div>
<div class="head">Description</div>
<div class="head">Images</div>
<div class="head">Stock left</div>
<div class="head">Action</div>
</form>
<form action="/index.php" enctype="multipart/form-data" method="post">
<div title="Title"><input required="required" class="input_varchar" name="add_title" type="text" value="" /></div>
Sin embargo, sería mucho más difícil hacer que este código funcione en IE6 / 7.
Las tablas no son para esto, ¿por qué no usas <div> y CSS?
Puede tener problemas con el ancho de columna, pero puede establecerlos explícitamente.
<table>
<tr>
<td>
<form>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</td>
</tr>
<tr>
<td>
<form>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
También puede considerar convertirlo en un formulario único y luego usar jQuery para seleccionar los elementos del formulario de la fila que desea, serializarlos y enviarlos como formulario.
Ver: http://api.jquery.com/serialize/
Además, hay una serie de complementos de cuadrícula muy agradables: http://www.google.com/search?q=jquery+grid&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a
Secundo la sugerencia div de Harmen. Alternativamente, puede envolver la tabla en un formulario y usar javascript para capturar el foco de la fila y ajustar la acción del formulario a través de javascript antes de enviar.
Si desea una "cuadrícula editable", es decir, una estructura similar a una tabla que le permite hacer una de las filas de un formulario, utilice CSS que imita 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 por separado para cada fila aparente de la tabla.
Pruebe 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 al enviar (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 en el envío.
El problema con el ajuste de una etiqueta FORM alrededor de una etiqueta TR (o TR alrededor de una FORMA) es que no es HTML válido. El FORMULARIO aún permitirá enviarlo como de costumbre, pero en este momento el DOM está roto. Nota: Intente obtener los elementos secundarios de su FORM o TR con JavaScript, esto puede conducir a resultados inesperados.
Tenga en cuenta que IE7 no admite estos estilos de tabla CSS e IE8 necesitará una declaración de tipo de documento para ponerlo en el modo "estándares": (pruebe con este o con 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 compatible con display: table, display: table-row y display: table-cell debe mostrar su tabla de datos css de la misma forma que si estuviera usando las etiquetas TABLE, TR y TD. La mayoría de ellos lo hacen.
Tenga en cuenta que también puede imitar a THEAD, TBODY, TFOOT al envolver 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.
Mira esta ilustración: http://jsfiddle.net/ZRQPP/
Si puede usar javascript y exigirlo estrictamente en su web, puede poner cuadros de texto, casillas de verificación y lo que sea en cada fila de su tabla y al final de cada fila, colocar el botón (o el enlace de la clase rowSubmit) "guardar". Sin ninguna etiqueta FORM. Forma que será simulada por JS y Ajax de esta manera:
<script type="text/javascript">
$(document).ready(function(){
$(".rowSubmit").click(function()
{
var form = ''<form><table><tr>'' + $(this).closest(''tr'').html() + ''</tr></table></form>'';
var serialized = $(form).serialize();
$.get(''url2action'', serialized, function(data){
// ... can be empty
});
});
});
</script>
¿Qué piensas?
PD: si escribe en jQuery esto:
$("valid HTML string")
$(variableWithValidHtmlString)
Se convertirá en un objeto jQuery y podrá trabajar con él como está acostumbrado en jQuery.
Si todas estas filas están relacionadas y necesita modificar los datos tabulares ... ¿por qué no simplemente envolver toda la tabla en un formulario y cambiar GET a POST (a menos que sepa que no va a enviar más que el cantidad máxima de datos que puede enviar una solicitud GET ).
(Eso supone, por supuesto, que todos los datos van al mismo lugar).
<form method="POST" action="your_action">
<table>
<tr>
<td><input type="text" name="r1c1" value="" /></td>
<!-- ... snip ... -->
</tr>
<!-- ... repeat as needed ... -->
</table>
</form>
Si usa JavaScript es una opción y desea evitar las tablas de anidamiento, incluya jQuery y pruebe el siguiente método.
En primer lugar, deberá asignarle a cada fila un ID único como ese:
<table>
<tr id="idrow1"><td> ADD AS MANY COLUMNS AS YOU LIKE </td><td><button onclick="submitRowAsForm(''idrow1'')">SUBMIT ROW1</button></td></tr>
<tr id="idrow2"><td> PUT INPUT FIELDS IN THE COLUMNS </td><td><button onclick="submitRowAsForm(''idrow2'')">SUBMIT ROW2</button></td></tr>
<tr id="idrow3"><td>ADD MORE THAN ONE INPUT PER COLUMN</td><td><button onclick="submitRowAsForm(''idrow3'')">SUBMIT ROW3</button></td></tr>
</table>
Luego, incluya la siguiente función en su JavaScript para su página.
<script>
function submitRowAsForm(idRow) {
form = document.createElement("form"); // CREATE A NEW FORM TO DUMP ELEMENTS INTO FOR SUBMISSION
form.method = "post"; // CHOOSE FORM SUBMISSION METHOD, "GET" OR "POST"
form.action = ""; // TELL THE FORM WHAT PAGE TO SUBMIT TO
$("#"+idRow+" td").children().each(function() { // GRAB ALL CHILD ELEMENTS OF <TD>''S IN THE ROW IDENTIFIED BY idRow, CLONE THEM, AND DUMP THEM IN OUR FORM
if(this.type.substring(0,6) == "select") { // JQUERY DOESN''T CLONE <SELECT> ELEMENTS PROPERLY, SO HANDLE THAT
input = document.createElement("input"); // CREATE AN ELEMENT TO COPY VALUES TO
input.type = "hidden";
input.name = this.name; // GIVE ELEMENT SAME NAME AS THE <SELECT>
input.value = this.value; // ASSIGN THE VALUE FROM THE <SELECT>
form.appendChild(input);
} else { // IF IT''S NOT A SELECT ELEMENT, JUST CLONE IT.
$(this).clone().appendTo(form);
}
});
form.submit(); // NOW SUBMIT THE FORM THAT WE''VE JUST CREATED AND POPULATED
}
</script>
Entonces, ¿qué hemos hecho aquí? Hemos otorgado a cada fila un ID único e incluido un elemento en la fila que puede activar el envío del identificador único de esa fila. Cuando se activa el elemento de envío, se crea y configura dinámicamente un nuevo formulario. Luego, usando jQuery, clonamos todos los elementos contenidos en <td> de la fila que se nos pasó y anexamos los clones a nuestro formulario creado dinámicamente. Finalmente, enviamos dicho formulario.
Tuve un problema similar al planteado en la pregunta original. Estaba intrigado por los divs diseñados como elementos de tabla (¡no sabía que podías hacer eso!) Y lo eché a correr. Sin embargo, mi solución fue mantener mis tablas envueltas en etiquetas, pero cambiar el nombre de cada entrada y seleccionar la opción para convertirme en las claves de la matriz, que ahora estoy analizando para obtener cada elemento en la fila seleccionada.
Aquí hay una sola fila de la mesa. Tenga en cuenta que la clave [4] es el ID procesado de la fila en la base de datos desde la cual se recuperó esta fila de la tabla:
<table>
<tr>
<td>DisabilityCategory</td>
<td><input type="text" name="FormElem[4][ElemLabel]" value="Disabilities"></td>
<td><select name="FormElem[4][Category]">
<option value="1">General</option>
<option value="3">Disability</option>
<option value="4">Injury</option>
<option value="2"selected>School</option>
<option value="5">Veteran</option>
<option value="10">Medical</option>
<option value="9">Supports</option>
<option value="7">Residential</option>
<option value="8">Guardian</option>
<option value="6">Criminal</option>
<option value="11">Contacts</option>
</select></td>
<td>4</td>
<td style="text-align:center;"><input type="text" name="FormElem[4][ElemSeq]" value="0" style="width:2.5em; text-align:center;"></td>
<td>''ccpPartic''</td>
<td><input type="text" name="FormElem[4][ElemType]" value="checkbox"></td>
<td><input type="checkbox" name="FormElem[4][ElemRequired]"></td>
<td><input type="text" name="FormElem[4][ElemLabelPrefix]" value=""></td>
<td><input type="text" name="FormElem[4][ElemLabelPostfix]" value=""></td>
<td><input type="text" name="FormElem[4][ElemLabelPosition]" value="before"></td>
<td><input type="submit" name="submit[4]" value="Commit Changes"></td>
</tr>
</table>
Luego, en PHP, estoy usando el siguiente método para almacenar en una matriz ($ SelectedElem) cada uno de los elementos en la fila correspondiente al botón de enviar. Estoy usando print_r() solo para ilustrar:
$SelectedElem = implode(",", array_keys($_POST[''submit'']));
print_r ($_POST[''FormElem''][$SelectedElem]);
Quizás esto suene intrincado, pero resultó ser bastante simple, y conservó la estructura organizativa de la mesa.
es tan simple como no usar una tabla para el marcado, como lo afirma Harmen. No estás mostrando datos después de todo, estás recopilando datos.
Tomaré, por ejemplo, la pregunta 23 aquí: http://accessible.netscouts-ggmbh.eu/en/developer.html#fb1_22_5
En papel, es bueno como es. Si tuviera que mostrar los resultados, probablemente estaría bien.
Pero puede reemplazarlo por ... 4 párrafos con una etiqueta y una selección (las opciones serían los encabezados de la primera línea). Un párrafo por línea, esto es mucho más simple.