HTML: expansión de un formulario en varias columnas de td

Me gustaría poder hacer algo como esto en HTML. No es HTML válido, pero la intención está ahí:HTML: expansión de un formulario en varias columnas de td

<table> 
    <tr> 
     <th>Name</th> 
     <th>Favorite Color</th> 
     <th>&nbsp;</th> 
     <th>&nbsp;</th> 
    </tr> 
    <tr> 
     <form action="/updatePerson" method="post"> 
      <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
      <td><input name="name" value="John"/></td> 
      <td><input name="favorite_color" value="Green"/></td> 
      <td><input type="submit" value="Edit Person"/></td> 
     </form> 
     <td> 
      <form action="deletePerson" method="post"> 
       <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
       <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
    <tr> 
     <form action="/updatePerson" method="post"> 
      <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
      <td><input name="name" value="Sally"/></td> 
      <td><input name="favorite_color" value="Blue"/></td> 
      <td><input type="submit" value="Edit Person"/></td> 
     </form> 
     <td> 
      <form action="deletePerson" method="post"> 
       <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
       <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
</table>

Obviamente, no puedo hacer esto porque no debe tener una etiqueta de forma inmediata en el interior de un elemento de <tr>. Las únicas alternativas que puedo ver son usar Javascript desagradable o cambiar el comportamiento de mi programa.

¿Cuál podría ser una solución que me permita tener un formulario que abarque varias columnas como esta?

Fuente

2009-12-01 Ben

Una solución sería si sus columnas múltiples realmente se crearon en DIV s en lugar de tablas.

Fuente

2009-12-01 08:08:12

No, no hay tal forma. Pero, en muchos navegadores, su uso está funcionando como esperaba, excepto cuando crea dinámicamente elementos DOM con dicha estructura en Firefox.

Tal vez pueda tirar la etiqueta < >, use javascript para hacer el envío; O puede usar <div> para hacer el diseño de tabla.

Fuente

2009-12-01 08:11:38 deerchao

Una opción es combinar las columnas con colspans como este:

<table> 
    <tr> 
     <th> 
      Name 
     </th> 
     <th> 
      Favorite Color 
     </th> 
     <th> 
      &nbsp; 
     </th> 
     <th> 
      &nbsp; 
     </th> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <form action="/updatePerson" method="post"> 
       <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
        <input name="name" value="John"/> 
        <input name="favorite_color" value="Green"/> 
        <input type="submit" value="Edit Person"/> 
      </form> 
      <form action="deletePerson" method="post"> 
       <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
        <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="4"> 
      <form action="/updatePerson" method="post"> 
       <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
       <input name="name" value="Sally"/> 
        <input name="favorite_color" value="Blue"/> 
        <input type="submit" value="Edit Person"/> 
      </form> 
      <form action="deletePerson" method="post"> 
       <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
        <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
</table>

y estilo de diseño del elemento de formulario con CSS. O puede ir con un diseño basado en DIV puro.

Fuente

2009-12-01 08:34:34

una buena opción que funciona de la OMI (colspans) – HorseloverFat

Utilice el diseño sin tablas con Div y CSS.

Por ejemplo.

<html> 
<head> 
<style type="text/css"> 
    #wrapper 
    { 
     width: 600px; 
    } 
    #header 
    { 
     width: 600px; 
     height:30px; 
    } 
    #person 
    { 
     clear:both; 
     width:600px;  } 
    .name 
    { 
    clear:both; 
     width: 200px; 
     float: left; 
     text-align: center; 
    } 
    .color 
    { 
     width: 200px; 
     float: left; 
     text-align: center; 
    } 
    .submit 
    { 
     width: 200px; 
     float: left; 
     text-align: center; 
    } 
</style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="header"> 
     <div class="name"> 
      <b>Name</b></div> 
     <div class="color"> 
      <b>Favorite Color</b></div> 
    </div> 
    <div id="Person"> 
     <form action="/updatePerson" method="post"> 
     <div class="name"> 
      <input name="name" value="John" /></div> 
     <div class="color"> 
      <input name="favorite_color" value="Green" /></div> 
     <div class="submit"> 
      <input type="submit" value="Edit Person" /></div> 
     </form> 
    </div> 
</div> 
</body> 
</html>

Fuente

2009-12-01 08:58:36

Hay algunas cosas que flota simplemente no cumplen bien. Una mesa mantendrá su factor de forma hasta el final amargo, donde como un flotador será feliz simplemente caer a la siguiente línea. – Sparatan117

Yo votaría por el desagradable Javascript. Permitiría mantener el diseño tal como está.

Fuente

2009-12-01 09:05:52

Usted podría

a) combinar toda fila de la tabla en una forma y manejar con un script del lado del servidor.

b) Ajuste form.action con javascript.

Fuente

2009-12-01 09:22:42

Si está utilizando jQuery, usted puede hacer esto:

<script type="text/javascript"> 
$(function() { 
    $('.rowForm').submit(function() { 
     //console.log($(':input',$(this).closest('tr'))); 
     //Because u cant span a form across a table row, we need to take all the inputs, move it to hidden div and submit 
     var rowFormContent = $('.rowFormContent',$(this)); 
     rowFormContent.html(''); //Clear out anything that may be in here    
     $(':input',$(this).closest('tr')).clone().appendTo(rowFormContent); 

     return true; 
    }); 
}); 
</script> 

<tr> 
... 
<td> 
    <form action="/cool" method="post" class="rowForm" id="form_row_1"> 
    <div class="rowFormContent" style="display: none;"></div> 
    <input type="submit" value="save"> 
    </form> 
</td> 
</tr>

El efecto secundario es que obtendrá un extra de presentar el tipo de entrada en su forma, pero se ocultará y no debe doler nada. Una nota sutil aquí es el uso de ': input'. Esta es una abreviatura de jQuery para todos los tipos de entrada (select, textarea, etc.). Tenga cuidado con select vals not being copied. Tendrás que hacer algún truco (campo oculto) para enviar el val seleccionado actual de un clon() d seleccionar.

Fuente

2011-11-30 22:53:12 rynop

He intentado varias formas de resolver el mismo problema; formularios múltiples dentro de una sola tabla html. FF & Chrome se cerrará automágicamente si se coloca antes o dentro de a o porque no es semánticamente correcto html. Agradezco que el diseño basado en la base resuelva el problema, pero si 'necesita' quedarse con el diseño basado en tablas, necesitará usar varias tablas y ajustar el & inmediatamente antes y después de las etiquetas &.En mi caso, hice algunos pequeños ajustes CSS en línea para eliminar un borde o dos y luego la mesa choca entre sí como si fueran filas.

Ejemplo en: http://jsfiddle.net/chopstik/ve9FP/

Fuente

2012-06-02 22:19:28 chopstik

publicación viejo yo sé, pero para una persona que quiere esto ...

Parece ser que todas las respuestas ahora están tan decididos a responder a su pregunta, que Olvidando considerar que podría haber una manera mucho más simple.

Puede haber algo oculto detrás de su pregunta, hay una razón por la que no puede hacer esto. Pero la forma "correcta" de HTML válida para hacer lo que estás tratando de hacer es colocar toda la tabla dentro de un solo formulario. ¿Por qué necesita un formulario para editar y otro para eliminar?

<form action="/updatePerson" method="post"> 
<table> 
    <thead> 
     <tr><th>Person Name</th><th>Fave Color</th><th>&nbsp;</th><th>&nbsp;</th></tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td><input type="text" size="30" value="John" name="name_1"></td> 
      <td><input name="favorite_color_1" value="Green"/></td> 
      <td><input type="submit" value="Update" name="submit_update_1"></td> 
      <td><input type="submit" value="Delete" name="submit_delete_1"></td> 
     </tr><tr> 
      <td><input type="text" size="30" value="James" name="name_2"></td> 
      <td><input name="favorite_color_2" value="Orange"/></td> 
      <td><input type="submit" value="Update" name="submit_update_2"></td> 
      <td><input type="submit" value="Delete" name="submit_delete_2"></td> 
     </tr> 
    </tbody> 
</table> 
</form>

Se necesita un poco de lógica en su ASP/PHP/servidor de código para calcular qué botón-nombre fue empujado, pero es necesario que de todas formas el uso de la solución propuesta.

Fuente

2012-07-06 16:12:20 cartbeforehorse

Esa no es una solución. ¿Qué sucede si realmente quiero un formulario para todos y cada uno de los usuarios? Tal vez para incorporar un botón de alternar para establecer una bandera a través de AJAX. Si lo hice contra un servicio REST (está bien, su publicación es de 2012, pero para cualquier persona que lea), entonces no podía confiar en que el servidor averiguara qué botón se presionó y demás. –

@ Balázs Por lo que recuerdo, no estaba al tanto de esto en 2012, pero HTML5 le permite asociar un botón de envío con un formulario sin que el botón de envío deba ser un descendiente directo del formulario en sí. Esto resolvería el problema original (a costa de hacer que el código sea algo más difícil de mantener e intuitivamente comprender). Sin embargo, incluso dada esta capacidad de HTML5, no entiendo tu objeción.No hay ninguna razón para que un servicio REST no sea lo suficientemente inteligente como para ignorar los datos que no son relevantes para su funcionamiento. – cartbeforehorse

-3

La forma en que siempre he hecho es:

<tr> 
    <td><form><input name=1></td> 
    <td><input name=2></td> 
    <td><input type=submit></form></td> 
</tr>

Incluir el forma dentro de la primera y la última td, por lo que es en un área de texto real. Es posible que los navegadores muy antiguos cierren el formulario en el /td, pero ninguno hoy.

Con su ejemplo:

<tr> 
    <td> 
     <form action="/updatePerson" method="post"> 
      <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
    </td> 
    <td> <input name="name" value="John"/></td> 
    <td> <input name="favorite_color" value="Green"/></td> 
    <td> 
      <input type="submit" value="Edit Person"/> 
     </form> 
    </td> 
    <td> 
     <form action="deletePerson" method="post"> 
      <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
      <input type="submit" value="Delete Person"/> 
     </form> 
    </td> 
</tr>

Fuente

2014-01-24 20:17:12 Peter

Este no es un html válido. – fukanchik

me encontré con el mismo problema, lo resolvió con Javascript/jQuery. El problema aquí es que el formulario no puede extenderse a través de múltiples columnas en una tabla, sin embargo, si el formulario tiene id <form id="unique_per_page"...></form>, cada uno de los elementos de formulario independientes como entrada, seleccionar o incluso textarea se puede asignar a ese formulario utilizando el atributo de formulario <input type="text" name="userName" form="specific_form_id">

el jQuery/javascript para asignar estas cosas tendrá que tener un generador de cadena aleatoria, que me agarró de la siguiente Stackoverflow answer

Así que en general el código se verá así:

$("table tr").each(function(i, el){ 
     if(!$(el).find("form[name='updatePerson']").attr("id")) 
     { //if the form does not have id attribute yet, assign a 10-character random string 
      var fname = (Math.random().toString(36)+'00000000000000000').slice(2, 10+2); 
      $(el).find("form[name='updatePerson']").attr("id",fname); //assign id to a chosen form 
      $(el).find("input").attr("form",fname); //assign form attribute to all inputs on this line 
      $(el).find("form[name='deletePerson'] > input").removeAttr("form"); //remove form attribute from inputs that are children of the other form 
     } 
    });

el HTML código que incluiste tendrá que ser actualizado con el nombre propio atribuye a las formas

<table> 
    <tr> 
     <th>Name</th> 
     <th>Favorite Color</th> 
     <th>&nbsp;</th> 
     <th>&nbsp;</th> 
    </tr> 
    <tr> 
     <form action="/updatePerson" name="updatePerson" method="post"> 
      <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
      <td><input name="name" value="John"/></td> 
      <td><input name="favorite_color" value="Green"/></td> 
      <td><input type="submit" value="Edit Person"/></td> 
     </form> 
     <td> 
      <form action="deletePerson" name="deletePerson" method="post"> 
       <input name="person_uuid" value="550e8400-e29b-41d4-a716-446655440000"/> 
       <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
    <tr> 
     <form action="/updatePerson" name="updatePerson" method="post"> 
      <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
      <td><input name="name" value="Sally"/></td> 
      <td><input name="favorite_color" value="Blue"/></td> 
      <td><input type="submit" value="Edit Person"/></td> 
     </form> 
     <td> 
      <form action="deletePerson" name="deletePerson" method="post"> 
       <input name="person_uuid" value="f47ac10b-58cc-4372-a567-0e02b2c3d479"/> 
       <input type="submit" value="Delete Person"/> 
      </form> 
     </td> 
    </tr> 
</table>

Fuente

2018-01-25 20:08:44

HTML: expansión de un formulario en varias columnas de td

Respuesta

Cuestiones relacionadas