HTML: Tabelle der Formulare?

Question

Ich finde häufig, dass ich eine Tabelle von Formularen erstellen möchte - eine Reihe von Zeilen, wobei jede Zeile ein separates Formular mit eigenen Feldern und Sendeschaltfläche ist. Zum Beispiel, hier ist ein Beispiel Zoohandlung Anwendung - vorstellen, dies ist eine Kasse Bildschirm, haben Sie die Möglichkeit, die Mengen und Eigenschaften der Tiere zu bearbeiten Sie ausgewählt haben, und speichern Sie die Änderungen vor dem Auschecken:

Pet Quantity Color Variety Update 
snake   4 black rattle update 
puppy   3 pink dalmatian update 

ich würde gerne in der Lage sein, diese mit HTML zu tun, die wie folgt aussieht:

<table> 
<thead><tr><th>Pet</th> <th>Quantity</th> <th>Color</th> <th>Variety</th> <th>Update</th></tr></thead> 
<tbody> 
    <tr> 
      <form> 
      <td>snake<input type="hidden" name="cartitem" value="55"></td> 
      <td><input name="count" value=4/></td> 
      <td><select name="color"></select></td> 
      <td><select name="variety"></select></td> 
      <td><input type="submit"></td> 
      </form> 
    </tr> 
</tbody> 
</table> 

Dies ist im Grunde ein Tisch voller Formen, ein Formular pro Zeile. Wenn Sie das Update einmal ausführen, können Sie diese bestimmte Zeile aktualisieren (dies ist kein echtes Beispiel, meine realen Anwendungen erfordern wirklich die Unabhängigkeit von Zeilen).

Aber das ist kein gültiges HTML. Je nach Spezifikation muss sich ein <form> entweder vollständig innerhalb eines <td> oder vollständig außerhalb eines <table> befinden. Dieses ungültige HTML bricht Javascript Bibliotheken und ist ein großer Schmerz, um sich zu befassen.

Am Ende mache ich eine Tabelle, die Spaltenüberschriften enthält, und mache dann eine Tabelle pro Formular. Dies erfordert jedoch feste Spaltenbreiten, damit die Eingänge in ordentlichen Spalten angeordnet sind, was unterdurchschnittlich ist. Wie gehst du mit diesem Problem um? Gibt es eine offensichtliche einfache Lösung, die ich vermisse? Wie erstelle ich eine Tabelle mit Formularen?

Answer 1

Der Trick hier ist, nur ein einziges Formular, z.

<form> 
     <table> 
     <!-- rows... --> 
     </table> 
     <p><input type="submit" value="Update quantity"></p> 
    </form> 

Angenommen, Sie haben eine Produktschlange mit ID 6. Dann benennen Sie die Eingabe für die Mengenfeldgröße dieses Artikels [6].

Ich weiß nicht, welche serverseitige Sprache Sie verwenden, aber in PHP können Sie dann über die Mengen iterieren und basierend auf der ID aktualisieren. Sie würden ein Array wie folgt erhalten:

Answer 2

Sie können CSS verwenden, um anderen Elementen Tabellenlayout zu geben.

.table { display: table; } 
.table>* { display: table-row; } 
.table>*>* { display: table-cell; } 

Dann verwenden Sie das folgende gültige HTML.

<div class="table"> 
    <form> 
     <div>snake<input type="hidden" name="cartitem" value="55"></div> 
     <div><input name="count" value=4/></div> 
    </form> 
</div>