HTML: Überspannen eines Formulars über mehrere TD-Spalten

Ich würde gerne in der Lage sein, etwas in HTML zu tun. Es ist nicht gültig HTML, aber die Absicht ist es:HTML: Überspannen eines Formulars über mehrere TD-Spalten

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

Natürlich, ich kann das nicht, weil ich nicht einen Formular-Tag unmittelbar innerhalb von einem <tr> Elemente haben muss. Die einzigen Alternativen, die ich sehen kann, sind böse Javascript oder das Verhalten meines Programms zu ändern.

Was könnte eine Lösung sein, die mir erlauben würde, ein Formular zu haben, das sich über mehrere Spalten erstreckt?

Quelle

2009-12-01 Ben

Eine Lösung wäre, wenn Ihre mehrere Spalten tatsächlich in DIV s anstelle von Tabellen erstellt wurden.

Quelle

2009-12-01 08:08:12

Nein, es gibt keine solche Form. In vielen Browsern funktioniert Ihre Verwendung jedoch wie erwartet, außer wenn Sie DOM-Elemente mit einer solchen Struktur in FireFox dynamisch erstellen.

Vielleicht können Sie die <Formular> Tag wegwerfen, verwenden Sie Javascript, um die Übermittlung zu tun; Oder Sie können <div>, um die Tabelle Layout-Sache zu tun.

Quelle

2009-12-01 08:11:38 deerchao

Eine Möglichkeit ist, die Spalten mit colspans so zu kombinieren:

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

und Stil das Layout des Formulars Element mit CSS. Oder Sie können mit einem reinen DIV-basierten Layout gehen.

Quelle

2009-12-01 08:34:34

eine nette Option, die IMO (colspans) arbeitet – HorseloverFat

Verwenden Sie ein Tabellenloses Design mit Divs und CSS.

Eg.

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

Quelle

2009-12-01 08:58:36

Es gibt einige Dinge, die gut einfach nicht erreichen schwimmt. Ein Tisch behält seinen Formfaktor bis zum bitteren Ende, während ein Float glücklich in die nächste Zeile fällt. – Sparatan117

Ich würde für die böse Javascript wählen. Es würde erlauben, das Layout so zu halten, wie es ist.

Quelle

2009-12-01 09:05:52

Sie könnten

a) kombinieren gesamte Tabellenzeile in einer Form und behandeln es mit einem Server-Skript.

oder

b) gesetzt form.action mit JavaScript.

Quelle

2009-12-01 09:22:42

Wenn Sie jQuery verwenden, können Sie dies tun:

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

Der Nebeneffekt ist, dass Sie eine zusätzliche Eingabetyp in Ihrem Formular bekommen, aber es wird ausgeblendet und sollte nichts schaden. Eine subtile Note hier ist die Verwendung von ': input'. Dies ist jQuery shorthand für alle Eingabearten (select, textarea etc.). Achten Sie auf select vals not being copied. Sie müssen einige Tricks ausführen (verstecktes Feld), um das aktuell ausgewählte val eines Klons zu übergeben() d select.

Quelle

2011-11-30 22:53:12 rynop

Ich habe versucht, verschiedene Möglichkeiten, das gleiche Problem zu lösen; mehrere Formulare in einer einzigen HTML-Tabelle. FF & Chrome wird automatisch geschlossen, wenn es vor oder innerhalb eines oder weil es nicht semantisch korrekt ist. Ich schätze basiertes Layout würde das Problem lösen, aber wenn Sie "brauchen", um mit dem Tabellen-basierten Layout zu bleiben, müssen Sie mehrere Tabellen verwenden und die & unmittelbar vor und nach den & Tags wickeln.In meinem Fall habe ich dann ein paar kleine Inline-CSS-Anpassungen vorgenommen, um einen oder zwei Ränder zu entfernen, und dann stößt die Tabelle aneinander an, als ob sie Zeilen wären.

Beispiel an: http://jsfiddle.net/chopstik/ve9FP/

Quelle

2012-06-02 22:19:28 chopstik

Old Posting Ich weiß, aber für jemand anderes dieses aufzublicken ...

Es scheint zu sein, dass alle Antworten jetzt sind so entschlossen, Ihre Frage zu beantworten, dass sie Vergiss zu berücksichtigen, dass es einen viel einfacheren Weg geben könnte.

Möglicherweise ist das hinter Ihrer Frage versteckt, es gibt einen Grund, warum Sie das nicht tun können. Aber die "korrekte" HTML-gültige Methode, um das zu tun, was Sie versuchen, ist, die gesamte Tabelle in ein einziges Formular zu bringen. Warum benötigen Sie ein Formular zum Bearbeiten und ein anderes zum Löschen?

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

Sie benötigen ein wenig Logik in Ihrem ASP/PHP/Server-Code zu berechnen, welche Knopf-Name gedrückt wurde, aber Sie müssen, dass Ihre vorgeschlagene Lösung trotzdem verwenden.

Quelle

2012-07-06 16:12:20 cartbeforehorse

Das ist keine Lösung. Was, wenn ich wirklich ein Formular für jeden einzelnen Benutzer haben wollte? Vielleicht, um einen Schalter zu verwenden, um einige Flaggen über AJAX zu setzen. Wenn ich das gegen einen REST-Dienst gemacht habe (okay, Ihr Beitrag ist von 2012, aber für jeden, der liest), konnte ich mich nicht darauf verlassen, dass der Server herausfand, welcher Knopf gedrückt wurde und ähnliches. –

@ Balázs Soweit ich mich erinnere, war mir das 2012 nicht bewusst, aber HTML5 ermöglicht es Ihnen, einen Absenden-Button mit einem Formular zu verknüpfen, ohne dass der Absenden-Button ein direkter Nachkomme des Formulars sein muss. Dies würde das ursprüngliche Problem lösen (auf Kosten, dass der Code etwas schwieriger zu warten und intuitiv zu verstehen ist). Trotz dieser HTML5-Fähigkeit verstehe ich Ihren Einwand nicht.Es gibt keinen Grund, warum ein REST-Service nicht intelligent genug sein kann, um die Daten zu ignorieren, die für seine Operation nicht relevant sind. – cartbeforehorse

-3

So wie ich es immer getan habe, ist:

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

Fügen Sie die Form in dem ersten und letzten td, so ist es in einem aktuellen Textbereich. Es ist möglich, dass wirklich alte Browser das Formular bei /td schließen, aber heute keine.

Mit Ihrem Beispiel:

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

Quelle

2014-01-24 20:17:12 Peter

Dies ist kein gültiger HTML-Code. – fukanchik

begegnete ich das gleiche Problem, löste es Javascript/jQuery verwenden. Das Problem hier ist, dass Formular nicht über mehrere Spalten in einer Tabelle erstrecken kann, aber wenn das Formular ID <form id="unique_per_page"...></form> jedes der eigenständigen Formularelemente wie Eingabe hat, kann select oder sogar textarea diesem Formular zugewiesen werden Formular Attribut <input type="text" name="userName" form="specific_form_id">

die jquery/javascript diese Dinge zuweisen müssen einen zufälligen Zeichenfolge Generator haben, die ich aus den folgenden Stackoverflow answer

packte also insgesamt der Code wie folgt aussehen:

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

die HTML Code, den Sie enthalten mit dem richtigen Namen aktualisiert werden Attribute für die Formulare müssen

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

Quelle

2018-01-25 20:08:44

HTML: Überspannen eines Formulars über mehrere TD-Spalten

Antwort

Verwandte Themen