Ich füge einige Formulare in eine HTML-Tabelle ein, um neue Zeilen hinzuzufügen und aktuelle Zeilen zu aktualisieren. Das Problem, das ich bekomme, ist, dass ich beim Überprüfen der Formulare in meinen Entwicklertools sehe, dass die Formularelemente unmittelbar nach dem Öffnen geschlossen werden (Eingaben usw. sind nicht im Formular enthalten).
Das Senden eines Formulars enthält daher keine Felder.
Die Tabellenzeile und die Eingaben lauten wie folgt:
<tr>
<form method="post" action="">
<td>
<input type="text" name="job_num">
</td>
<td>
<input type="text" name="desc">
</td>
</form>
</tr>Jede Hilfe wäre großartig, danke.
html
firebug
html-table
forms
Alex
quelle
quelle
<form>kann nicht hineingelegt werden<tr>.<tr>.Antworten:
Eine Form ist nicht erlaubt ein untergeordnetes Element eines sein
table,tbodyodertr. Der Versuch, ein Formular dort abzulegen, führt dazu, dass der Browser das Formular so verschiebt, dass es nach der Tabelle angezeigt wird (während der Inhalt - Tabellenzeilen, Tabellenzellen, Eingaben usw. - zurückbleibt).Sie können eine ganze Tabelle in einem Formular haben. Sie können ein Formular in einer Tabellenzelle haben. Sie können keinen Teil einer Tabelle in einem Formular haben.
Verwenden Sie ein Formular um die gesamte Tabelle. Verwenden Sie dann entweder die angeklickte Schaltfläche "Senden", um zu bestimmen, welche Zeile verarbeitet werden soll (um schnell zu sein), oder verarbeiten Sie jede Zeile (um Massenaktualisierungen zu ermöglichen).
HTML 5 führt das
formAttribut ein . Auf diese Weise können Sie ein Formular pro Zeile außerhalb der Tabelle bereitstellen und dann das gesamte Formularsteuerelement in einer bestimmten Zeile mithilfe des Formulars einem dieser Formulare zuordnenid.quelle
<form>innerhalb der<table>in den Normen?Verwenden Sie das Attribut "Formular" , wenn Sie Ihr Markup speichern möchten:
(* Formularfelder außerhalb des <form> -Tags)
Siehe auch die ersten 2 Kommentare
quelle
Wenn Sie einen „editierbaren Raster“ , dh eine Tabelle , wie Struktur , die Sie , dass imitiert den TABLE - Tag Layout eine der Zeilen eine Form, die Verwendung CSS machen kann:
display:table,display:table-row, unddisplay:table-cell.Es ist nicht erforderlich, die gesamte Tabelle in ein Formular zu verpacken und für jede scheinbare Zeile Ihrer Tabelle ein separates Formular und eine separate Tabelle zu erstellen.
Versuchen Sie stattdessen Folgendes:
Das Problem beim Umschließen der gesamten TABELLE in ein FORMULAR besteht darin, dass alle Formularelemente beim Senden gesendet werden (möglicherweise ist dies erwünscht, aber wahrscheinlich nicht). Mit dieser Methode können Sie für jede "Zeile" ein Formular definieren und beim Senden nur diese Datenzeile senden.
Das Problem beim Umschließen eines TR-Tags mit einem FORM-Tag (oder eines FORM-Tags mit TR) besteht darin, dass es sich um ungültiges HTML handelt. Das FORMULAR erlaubt weiterhin das Senden wie gewohnt, aber zu diesem Zeitpunkt ist das DOM defekt. Hinweis: Versuchen Sie, die untergeordneten Elemente Ihres FORMULARS oder TR mit JavaScript abzurufen. Dies kann zu unerwarteten Ergebnissen führen.
Beachten Sie, dass IE7 diese CSS-Tabellenstile nicht unterstützt und IE8 eine Doctype-Deklaration benötigt, um in den "Standard" -Modus zu gelangen: (versuchen Sie dies oder etwas Äquivalentes)
Jeder andere Browser, der display: table, display: table-row und display: table-cell unterstützt, sollte Ihre CSS-Datentabelle genauso anzeigen wie bei Verwendung der Tags TABLE, TR und TD. Die meisten von ihnen tun es.
Beachten Sie, dass Sie auch mimische THEAD, TBODY, TFOOT durch Ihre Zeilengruppen in einem anderen DIV mit Einwickeln
display: table-header-group,table-row-groupundtable-footer-groupjeweils.HINWEIS: Das einzige, was Sie mit dieser Methode nicht tun können, ist Colspan.
Schauen Sie sich diese Abbildung an: http://jsfiddle.net/ZRQPP/
quelle