tabellarischen Layout mit Formularen
0 0 0 
Der Martin
0 0 0 
dedlfix
0 Der Martin
0 
Gunnar Bittersmann
0 0
tabellarischen Layout mit Formularen
Hallo!
Habe folgendes HTML Problem.
Ich stelle den Inhalt einer MySQL-Tabelle in einem tabellarischen HTML Layout dar.
Das ganze soll auf Datensatzebene bearbeitbar sein. D.h. ich verwende pro Datensatz ein HTML-Formular. Somit wird immer nur der bearbeitete Datensatz submitted und nicht die ganze Tabelle.
Mit ein bisschen CSS und graphischen Buttons sieht das ganze sehr nett aus, funktioniert gut ist aber leider nicht korrekt da Formulare an dieser Stelle nicht erlaubt sind.
Leider weiß ich aber nicht wie ich sonst das Tabellen-Layout samt Formulare vereinen könnte.
Bitte um Anregungen! Danke!
Zum besseren Verständnis ein auf HTML/CSS beschränktes Beispiel:
<!DOCTYPE html PUBLIC '-//W3C//DTD HTML 4.01//EN'
'http://www.w3.org/TR/html4/strict.dtd'>
<html>
<head>
<style type="text/css">
*
{
margin : 0px 0px 0px 0px;
padding : 0px 0px 0px 0px;
border : 0px;
}
table
{
border-collapse : collapse;
}
td
{
border : 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Wert1</th>
<th>Wert2</th>
<th>Wert3</th>
<th>Wert4</th>
<th>Speichern</th>
<th>Löschen</th>
</tr>
<tr>
<form method='POST' action=''>
<td><input name="Wert1" value="10"></td>
<td><input name="Wert2" value="20"></td>
<td><input name="Wert3" value="30"></td>
<td><input name="Wert4" value="40"></td>
<td><input type="submit" name="sic" value="Speichern"></td>
<td><input type="submit" name="del" value="Löschen" ></td>
</form>
</tr>
<tr>
<form method='POST' action=''>
<td><input name="Wert1" value="100"></td>
<td><input name="Wert2" value="200"></td>
<td><input name="Wert3" value="300"></td>
<td><input name="Wert4" value="400"></td>
<td><input type="submit" name="sic" value="Speichern"></td>
<td><input type="submit" name="del" value="Löschen"></td>
</form>
</tr>
</table>
</body>
</html>
-
Mahlzeit Blabla,
<table>
[...]
<tr>
<form method='POST' action=''>
<td><input name="Wert1" value="10"></td>
<td><input name="Wert2" value="20"></td>
<td><input name="Wert3" value="30"></td>
<td><input name="Wert4" value="40"></td>
<td><input type="submit" name="sic" value="Speichern"></td>
<td><input type="submit" name="del" value="Löschen" ></td>
</form>
</tr>
[...]
</table>Validiere Deinen Code! <http://de.selfhtml.org/html/referenz/elemente.htm#tr@title=<tr>> darf als Kindelemente lediglich <th> oder <td> enthalten.
Du könntest ein Formular um die gesamte Tabelle legen, jeden Button mit einem Namen versehen, aus dem man auf die Datensatz-ID schließen kann, und musst dann in der Formularverarbeitung einfach abfragen, welcher der Buttons gedrückt wurde, d.h. welcher der Datensätze gespeichert bzw. gelöscht werden soll.
MfG,
EKKi--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|-
Danke EKKi für deine Antwort!
Die Idee mit dem Formular um die ganze Tabelle hatte ich auch schon. Vermutlich wird das auch funktionieren nur werden dann halt immer alle Datensätze submitted (auch wenn dann nur der entsprechende verarbeitet wird). Ich weiß nicht ob das ab einer gewissen Datenmenge Probleme breitet.
Ein Layout ohne Tabelle mit CSS formatiert würde auch gehen. Andererseits gibts ja genau dafür Tabellen.
Ich dreh mich ein wenig im Kreis ;-)
mfg
Blabla-
Hallo,
Die Idee mit dem Formular um die ganze Tabelle hatte ich auch schon. Vermutlich wird das auch funktionieren nur werden dann halt immer alle Datensätze submitted (auch wenn dann nur der entsprechende verarbeitet wird). Ich weiß nicht ob das ab einer gewissen Datenmenge Probleme breitet.
bei der Übergabe mit GET kann das ab einer gewissen Länge an Grenzen stoßen. Aber sinnvollerweise verwendest du ja sowieso POST, da ist die Datenmenge unkritisch - es ist einfach nur ineffizient, dann eine Menge Daten zu verschicken, die nicht beachtet werden. Lässt sich aber in diesem Fall nicht ändern.
Ciao,
Martin--
Ja, ja ... E.T. wusste schon, warum er wieder nach Hause wollte.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Hallo,
bei der Übergabe mit GET kann das ab einer gewissen Länge an Grenzen stoßen. Aber sinnvollerweise verwendest du ja sowieso POST, da ist die Datenmenge unkritisch - es ist einfach nur ineffizient, dann eine Menge Daten zu verschicken, die nicht beachtet werden. Lässt sich aber in diesem Fall nicht ändern.
Lässt sich nicht ändern würde ich so nicht sagen.
Mach ein Formular um die Tabelle herum mit allen Datensätzen. Anschliessend fügst du ein weiteres Formular ein, welches eine entsprechende Anzahl an hidden-Fields hat.
Beim Klicken auf 'Bearbeiten' schreibst du per JavaScript den benötigten Datensatz in die jeweiligen hidden-Fields und schickst dieses Formular ab. User ohne JavaScript schicken dann halt das erste Formular ab, darauf solltest du dann entsprechend reagieren.
vg ichbinich
--
alles wird gut...-
Mach ein Formular um die Tabelle herum mit allen Datensätzen. Anschliessend fügst du ein weiteres Formular ein, welches eine entsprechende Anzahl an hidden-Fields hat.
Sind wir schon bei HTML5 angelangt, dass man das darf?
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Hi!
Mach ein Formular um die Tabelle herum mit allen Datensätzen. Anschliessend fügst du ein weiteres Formular ein, welches eine entsprechende Anzahl an hidden-Fields hat.
Sind wir schon bei HTML5 angelangt, dass man das darf?Auch da nicht, aber ich leg das mal als missverständlich formuliert aus und interpretiere, dass das "einfügen" der Seite galt und nicht dem Formular.
http://www.w3.org/TR/html5/forms.html#the-form-element
Lo!
-
-
Hi,
es ist einfach nur ineffizient, dann eine Menge Daten zu verschicken, die nicht beachtet werden. Lässt sich aber in diesem Fall nicht ändern.
Mach ein Formular um die Tabelle herum mit allen Datensätzen. Anschliessend fügst du ein weiteres Formular ein, welches eine entsprechende Anzahl an hidden-Fields hat.
Beim Klicken auf 'Bearbeiten' schreibst du per JavaScript den benötigten Datensatz in die jeweiligen hidden-Fields und schickst dieses Formular ab. User ohne JavaScript schicken dann halt das erste Formular ab, darauf solltest du dann entsprechend reagieren.und was hätte das für einen Vorteil? Für den Autor erstmal keinen, im Gegenteil - er muss zusätzlichen Aufwand investieren. Für den Besucher auch nicht, denn was du hinter des Kulissen abläuft, bekommt er in aller Regel auch nicht mit - und wir reden ja hier nicht von mehreren MB, die da übertragen werden sollen, sondern nur um, sagen wir, 1kB im Vergleich zu 20kB, nur um mal eine Hausnummer zu nennen.
Die einzigen, die das überhaupt merken, sind Nutzer mit langsamen Internet-Zugängen (alte analoge Modems, GPRS) oder mit Volumentarif - letzteres auch nur, wenn man dieses Angebot häufig nutzt.Also versteh mich nicht falsch - die Idee ist an sich gut. Nur steht der Nutzen IMHO nicht im rechten Verhätnis zum Aufwand.
So long,
Martin--
Lehrer: Wieviel ist die Hälfte von 8?
Schüler: Kommt drauf an. Waagrecht 0 und senkrecht 3.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
@@EKKi:
nuqneH
Validiere Deinen Code! <http://de.selfhtml.org/html/referenz/elemente.htm#tr@title=<tr>> darf als Kindelemente lediglich <th> oder <td> enthalten.
Der Hinweis war hier unnötig; der OP wusste bereits, dass es „aber leider nicht korrekt [ist,] da Formulare an dieser Stelle nicht erlaubt sind“.
Die HTML-Spec sieht diesen (nicht unbedingt seltenen) Usecase nicht vor und erlaubt weder table/form/tr noch table/tr/form. HTML5 bessert daran nichts nach. (Warum überrascht das nicht?)
Das lässt folgende Optionen:
(1) Hier wäre es vielleicht angebracht, auf Validität zu verzichten, denn es „funktioniert gut“.
(Sagte ich eben: auf Validität zu verzichten? Ja, tat ich.)
(2) Ansonsten müsste man auf die Tabelle im Markup verzichten:
<div id="myForms"> <form method='POST' action=''> <input name="Wert1" value="10"> <input name="Wert2" value="20"> <input name="Wert3" value="30"> <input name="Wert4" value="40"> <input type="submit" name="sic" value="Speichern"> <input type="submit" name="del" value="Löschen"> </form> <form method='POST' action=''> <input name="Wert1" value="100"> <input name="Wert2" value="200"> <input name="Wert3" value="300"> <input name="Wert4" value="400 <input type="submit" name="sic" value="Speichern"> <input type="submit" name="del" value="Löschen"> </form> <div>und sie ggfs. per Stylesheet erstellen:
#myForms { display: table } #myForms form { display: table-row } #myForms input { display: table-cell }IrgendEin Browser spielt dabei nicht mit.
Und eine wirkliche Tabelle (mit Zuordnungen der Zellen zu Zeilen und Spalten, mit denen nicht-grafische UAs und Screenreader etwas anfangen könnten) ist das wohl auch nicht.
Und die „Tabellenspalten“-Überschriften müsste man auch noch reinfrickeln. (Sie stünden dann ohne Bezug im Raum.)
Da 'input' ersetzte Inline-Elemente sind, sollten aber auch (falls überhaupt notwendig) Breitenangaben genügen:
input[name^="Wert"] { width: 6em } input[name="sic"] { width: 5em } input[name="del"] { width: 4em }(3) Oder aber
Du könntest ein Formular um die gesamte Tabelle legen
mit allen damit verbundenen Nachteilen. Und sinnvolles Markup ist das auch nicht.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
Danke für die vielen Denkanstöße!
Habe es jetzt so gelöst, dass für jeden Datensatz ein eigenes Formular erstellt wird und in diesem eine eigene Tabelle mit einer Row. Somit wird auch immer nur der bearbeitete Datensatz submitted. Das ganze hübsch mit CSS formatiert sieht aus wie eine einzelne Tabelle.
Funktioniert mit akutellen IE, FF, Opera und was successfully checked as HTML 4.01 Strict!Und so siehts aus: http://img827.imageshack.us/img827/5433/frmv.jpg
mfg
Blabla-
Ich stand hier und da auch schon vor dem Problem. Es bietet sich nunmal an tabellarische Daten in einer Tabelle zu bearbeiten ^^
Meine Lösung bestand bisweilen meistens darin, dass ich statt direkt in der Tabelle zu arbeiten dort "edit-Links" eingesetzt habe, die eben die ID übertragen woraufhin man an ein editier-Formular geschickt wurde, wo man den Datensatz dann bearbeiten durfte.
Kann man auch mit PopUp/_blank oder so machen. Etwas JavaScript kann dann auch noch helfen die ursprüngliche Tabelle zu aktualisieren und das Editier-Fenster zu schließen so man das möchte.Aber wenn du mit der Lösung wie sie ist zufrieden bist um so besser :)
--
sh:( fo:| ch:? rl:( br:& n4:& ie:{ mo:} va:) de:µ_de:] zu:) fl:( ss:| ls:[ js:(
-
-
Hi,
*
{
margin : 0px 0px 0px 0px;
[...]
}sei doch bitte wenigstens konsequent. Der Code muss korrekt lauten:
*
{
margin
:
0px
0px
0px
0px
;
[...]
}Das macht die Sache doch auch gleich viel übersichtlicher.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
@@Cheatah:
nuqneH
sei doch bitte wenigstens konsequent. Der Code muss korrekt lauten:
Polemik-Alarm!!!11einself
Deine Abneigung gegen Allman-Style ist bekannt. Aber nicht unbedingt nachvollziehbar.
Mein CSS-Code ist ebenso formatiert wie Blablas, und das ist auch gut so.[tm]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-