HTML: Spanning un formulaire à travers plusieurs colonnes td

Je voudrais être en mesure de faire quelque chose comme ça en HTML. Il n'est pas valide HTML, mais l'intention est là:HTML: Spanning un formulaire à travers plusieurs colonnes 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>

De toute évidence, je ne peux pas le faire parce que je ne dois pas avoir une étiquette de forme immédiatement à l'intérieur d'un élément de <tr>. Les seules alternatives que je peux voir sont d'utiliser javascript méchant ou de changer le comportement de mon programme.

Quelle pourrait être une solution qui me permettrait d'avoir un formulaire qui couvre plusieurs colonnes comme celle-ci?

Source

2009-12-01 Ben

Une solution serait que vos multiples colonnes aient été créées en DIV au lieu de tables.

Source

2009-12-01 08:08:12

Non, il n'y a pas une telle forme. Mais, dans de nombreux navigateurs, votre utilisation fonctionne comme vous l'attendiez, sauf lorsque vous créez dynamiquement des éléments DOM avec une telle structure dans FireFox.

Peut-être que vous pouvez jeter le tag <formulaire>, utilisez javascript pour soumettre; Ou vous pouvez utiliser <div> pour faire la chose mise en page de table.

Source

2009-12-01 08:11:38 deerchao

Une option consiste à combiner les colonnes avec colspans comme ceci:

<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>

et le style de mise en page de l'élément de forme avec CSS. Ou vous pouvez aller avec une mise en page pure basée sur DIV.

Source

2009-12-01 08:34:34

une option intéressante qui fonctionne l'OMI (colspans) – HorseloverFat

Utilisez un design sans table avec Div et CSS.

Par exemple.

<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>

Source

2009-12-01 08:58:36

Il y a des choses qui flotte juste accomplissons pas bien. Une table gardera son facteur de forme jusqu'à la fin amère, où un flotteur se contentera de passer à la ligne suivante. – Sparatan117

Je voterais pour le Javascript désagréable. Cela permettrait de garder la disposition telle qu'elle est.

Source

2009-12-01 09:05:52

Vous pouvez

a) combiner toute la ligne de la table sous une forme et le manipuler avec un script côté serveur.

b) définir form.action avec javascript.

Source

2009-12-01 09:22:42

Si vous utilisez jQuery, vous pouvez le faire:

<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>

L'effet secondaire est que vous obtiendrez un type d'entrée soumettre supplémentaire dans votre forme, mais il sera caché et ne devrait pas nuire à quoi que ce soit. Une note subtile ici, est l'utilisation de ': input'. C'est un raccourci jQuery pour tous les types d'entrée (select, textarea, etc.). Attention à select vals not being copied. Vous devrez faire une supercherie (champ caché) pour soumettre le val sélectionné d'un clone() d select.

Source

2011-11-30 22:53:12 rynop

J'ai essayé de nombreuses façons de résoudre le même problème; plusieurs formulaires dans une seule table html. FF & Chrome se fermera automatiquement s'il est placé avant ou dans un ou parce que son html n'est pas sémantiquement correct. J'apprécie la mise en page basée résoudrait le problème, mais si vous «besoin» de coller avec la mise en page basée sur la table, vous devrez utiliser plusieurs tables et envelopper le & immédiatement avant et après les balises &.Dans mon cas, j'ai ensuite fait quelques petits ajustements CSS inline pour supprimer une bordure ou deux et ensuite la table se dresse les uns contre les autres comme s'il s'agissait de lignes.

Exemple à: http://jsfiddle.net/chopstik/ve9FP/

Source

2012-06-02 22:19:28 chopstik

affichage Je sais, mais pour tous ceux qui cherchent autre ... cette place

Il semble que toutes les réponses à sont maintenant si déterminés à répondre à votre question, qu'ils oublions de considérer qu'il pourrait y avoir un moyen beaucoup plus simple.

Il se peut que caché derrière votre question, il y a une raison pour laquelle vous ne pouvez pas faire cela. Mais la "bonne" méthode HTML-valide pour faire ce que vous essayez de faire est de placer la table entière dans un seul formulaire. Pourquoi avez-vous besoin d'un formulaire à modifier, et un autre à supprimer?

<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>

Vous avez besoin d'un peu de logique dans votre ASP/PHP/code pour le calcul qui a été poussé bouton-nom, mais vous avez besoin que l'utilisation de toute façon votre solution proposée.

Source

2012-07-06 16:12:20 cartbeforehorse

Ce n'est pas une solution. Et si je voulais vraiment un formulaire pour chaque utilisateur? Peut-être d'incorporer un bouton à bascule pour définir un drapeau via AJAX. Si je l'ai fait contre un service REST (d'accord, votre message est à partir de 2012, mais pour toute personne lisant), je ne pouvais pas compter sur le serveur de déterminer quel bouton a été pressé et autres. –

@ Balázs D'après ce dont je me souviens, je n'étais pas au courant en 2012, mais HTML5 vous permet d'associer un bouton de soumission à un formulaire sans que le bouton de soumission doive être un descendant direct du formulaire lui-même. Cela résoudrait le problème original (au prix de rendre le code plus difficile à maintenir et à comprendre intuitivement). Néanmoins, même avec cette capacité HTML5, je ne comprends pas votre objection.Il n'y a aucune raison pour qu'un service REST ne soit pas assez intelligent pour ignorer les données qui ne sont pas pertinentes pour son fonctionnement. – cartbeforehorse

-3

La façon dont je l'ai toujours fait est:

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

Inclure la forme dans le premier et le dernier td, il est donc dans une zone de texte actuel. Il est possible que les anciens navigateurs fermeront le formulaire au /td, mais aucun aujourd'hui.

Avec votre exemple:

<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>

Source

2014-01-24 20:17:12 Peter

Ceci n'est pas un format html valide. – fukanchik

j'ai rencontré le même problème, résolu le problème en utilisant Javascript/jQuery. Le problème ici est que le formulaire ne peut pas s'étendre sur plusieurs colonnes dans une table. Toutefois, si le formulaire a l'ID <form id="unique_per_page"...></form>, chacun des éléments de formulaire autonomes comme input, select ou textarea peut être affecté à ce formulaire à l'aide de l'attribut <input type="text" name="userName" form="specific_form_id">

le jquery/javascript pour affecter ces choses devront avoir un générateur de chaîne aléatoire, que je saisis de la Stackoverflow answer suivante

donc dans l'ensemble du code ressemblera à ceci:

$("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 
     } 
    });

le code HTML code que vous avez inclus devront être mis à jour avec les attributs de nom propre pour les formes

<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>

Source

2018-01-25 20:08:44

HTML: Spanning un formulaire à travers plusieurs colonnes td

Répondre

Questions connexes