Formulare in HTML-Links
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
antwort
array
blocken
code
dank
dossier
einzelnen elemente
element
formular
http
letzter versuch
meinung
problem
suppe
tabellarischen inhalt
tabelle
typ
url
vorname
zeile
-
Hallo zusammen
Der Titel tönt ja schonmal ziemlich dumm, das ist mir durchaus bewusst. Wenn ich das Problem also komplett falsch angehe, bin ich froh wenn ihr mich korrigiert :-)
Bisher hatte ich auf meiner Webseite HTML-Tabellen zur Darstellung tabellarischer Inhalte verwendet (also ich habe nicht das Styling darüber gemacht sondern lediglich wenn etwas wirklich als Tabelle daher kam).
Dann ist meine Homepage so organisiert, dass wenn man jeweils auf die Id-Klickte (meist in der vordersten Spalte) öffnete sich das Detail zum gewählten Eintrag. Soweit so gut.
Ich wollte das ganze nun etwas ansprechender gestalten, zudem sind ja HTML-Tabellen ziemlich in Verruf, deshalb habe ich diese auch gleich gekippt und bin so zu folgenden Konstrukt gekommen:
[ <a href="dossier.php?id=xyz" class="liste zeilenfarbe_1" style="display: table-row; z-index: 0;" onclick="bearbeiten(this.href); return false;"> <span class="tabellenzelle">123</span> <span class="tabellenzelle">Name Vorname</span> <span class="tabellenzelle">Datum1</span> <span class="tabellenzelle">Datum2</span> <span class="tabellenzelle"><input style="z-index: 99;" onclick="this.checked=\'\'; return false;" checked="checked" type="checkbox" value="'.$zeile['id'].'" name="dossier[]" /></span></a>
(Wobei die class jeweils die Attribute display: table-row/cell; enthält).
Vorteil: die ganze Linie kann angeklickt werden, das Dossier öffnet immer, invertierte Zeilenfarbe (mittels PHP) und eben keine HTML-Tabellen mehr.
Ich bin dann schonmal etwas stuzig geworden, warum diese Tabelle jetzt besser sein soll als eine HTML-Tabelle, wirklich übersichtlich vom Code her ist das nämlich nicht, nun gut, spielt ja auch noch nicht so eine Rolle.
Das Problem ist nun das Formular: zuhinters auf der Zeile habe ich jeweils Checkboxen platziert, mit denen man verschiedene Dossiers anwählen und danach verschiedene Operationen durchführen kann.
Klicke ich nun auf das Element, geht jedesmal das Dossier auf und wegen dem Return false; wird der Wert nicht übernommen.
Das ist mir auch alles logisch, dass dies so passiert, aber ich hätte es halt gerne anders.
Dazu habe ich schon Stunden mit suchen und probieren gebraucht (vielleicht tippe ich auch einfach die falschen Wörter bei Google ein).
Das z-index war mein letzter Versuch. Davor versuchte ich, das Element einfach aus der Zeile zu nehmen, doch (logisch): es gab einen Zeilenbruch, welchen ich eigentlich nicht möchte ...
Kann mir hier jemand helfen?
Danke & Gruess
meron -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
hi meron,
also tatsächlich sidn "blinde"-tabellen zum layouten einer seite irgendwie schlecht geredet worden, ob eine div-suppe jetzt besser ist sei dahingestellt.
aber der grund dafür ist wohl die falsche semantik dahinter, also das man inhalte entsprechend ihrer art auszeichnen sollte (suchmaschinen werden dirs danken), und halt nicht tabellen benutzt um nicht-tabellarischen inhalt darzustellen. in deinem fall handelt es sich ja aber tatsächlich um tabellarischen inhalt, der meiner meinung nach nicht besser als in einer (html-)tabelle ausgezeichnet werden kann.
dem ungeachtet - wie wäre es denn wenn du den "zeilen-link" zur bearbeitung nicht komplett über die ganze zeile erstreckst sondern nur über jede der einzelnen zellen die kein formular-steuerelement enthalten ?
Beitrag zuletzt geändert: 10.2.2013 23:22:35 von hcms -
Hi hcms
danke für deine Antwort (sorry für meine späte Antwort ...)
Also meinst du es folgendermassen:
<span class="tabellenzeile><a href="dossier.php?id=xyz" class="liste zeilenfarbe_1" onclick="bearbeiten(this.href); return false;"> <span class="tabellenzelle">123</span> <span class="tabellenzelle">Name Vorname</span> <span class="tabellenzelle">Datum1</span> <span class="tabellenzelle">Datum2</span></a> <span class="tabellenzelle"><input style="z-index: 99;" onclick="this.checked=\'\'; return false;" checked="checked" type="checkbox" value="'.$zeile['id'].'" name="dossier[]" /></span></span>
Das habe ich auch schon probiert, dann wurde mir aber die Tabelle nicht mehr schön aufgebaut (die Zeilen NameVorname,Datum1 etc. der einzelnen Datensätze waren nicht mehr untereinander, oder aber das Formularelement wurde einfach auf eine neue Zeile genommen [ganz alleine]). Vielleicht hatte ich auch aber einfach falsche Eigenschaften definiert: wäre dann das a-Element vom Typ inline und die spans vom Typ Block? Oder inline-block? (da Blicke ich nicht wirklich durch, sorry).
Oder meinst du es wiefolgt:
<span class="tabellenzeile><a href="dossier.php?id=xyz" class="liste zeilenfarbe_1" onclick="bearbeiten(this.href); return false;"><span class="tabellenzelle">123</span></a> <a href="dossier.php?id=xyz" class="liste zeilenfarbe_1" onclick="bearbeiten(this.href); return false;"><span class="tabellenzelle">Name Vorname</span></a> <a href="dossier.php?id=xyz" class="liste zeilenfarbe_1" onclick="bearbeiten(this.href); return false;"><span class="tabellenzelle">Datum1</span></a> <span class="tabellenzelle">Datum2</span></a> <span class="tabellenzelle"><input style="z-index: 99;" onclick="this.checked=\'\'; return false;" checked="checked" type="checkbox" value="'.$zeile['id'].'" name="dossier[]" /></span></span>
Dieses Konstrukt wollte ich nämlich verhindern
, da es codemässig sehr unübersichtlich wird.
Wenn es nicht anders geht werde ich dies aber so lösen.
Schonmal Merci für deine Antwort.
Grüsse
Meron
-
Hi Meron,
ne, eigentlich meinte ich das eher einfach so:<?php $aDatensaetze = array(); $aDatensaetze[] = array('123','John Doe','31.12.1999','01.04.2000'); $aDatensaetze[] = array('124','Don Joe','24.12.2012','05.05.2013'); ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tabelle</title> <style type="text/css"> .tabelle { display:table; border:1px solid #09C; } .tabelle > div { display:table-row; background-color:#EEE; } .tabelle > div:hover { background-color:#09C; } .tabelle > div > span { display:table-cell; border-bottom:1px solid #09C; } .tabelle > div:last-child > span { border-bottom:none; } .tabelle > div > span > a { display:block; padding:1px 4px; text-decoration:none; color:#036; } .tabelle > div > span > a:hover { text-decoration:none; } .tabelle > div:hover > span > a { color:#FFF; } </style> </head> <body> <form action="dossier.php" method="get"> <div class="tabelle"> <?php foreach($aDatensaetze as $aDatensatz) { echo '<div>'; foreach($aDatensatz as $cDaten) { echo '<span><a href="dossier.php?dossier='.$aDatensatz[0].'">'.$cDaten.'</a></span>'; } echo '<span><input type="checkbox" value="'.$aDatensatz[0].'" name="dossier[]" /></span>'; echo '</div>'; } ?> </div> <input type="submit" value="Ausgewählte bearbeiten" /> </form> </body> </html>
kannst du dir hier ansehen: http://hcms.12hp.at/tabellenzeileclick/ -
hi
Hey danke dir vielmals für die Lösung, sieht schonmal super aus in der Demo und gleichzeitig habe ich wieder etwas wichtiges gelernt:
Eine Tabelle besser mit einer Foreach Schleife aufbauen anstelle von Hard-Core Programmierung der einzelnen Elemente (viel Zeit ich nämlich schon verbraten habe wenn nach einer Änderung die Tabelle wiedermal falsch dargestellt wurde möchte ich hier gar nicht weiter erwähnen, das ist dann auch gleich gefixt!).
Werde ich gleich heute Abend einbauen.
Danke dir vielmals.
Gruess
Markus
Beitrag zuletzt geändert: 7.3.2013 12:57:55 von meron -
hehe - gern.
aber ich will nochmal betonen:
Eine blinde Tabelle aus semantischen gründen zwecks suchmaschinenoptimierung lieber als div-suppe zu notieren mag begründet sein... wenn es sich aber (wie ja bei deinem beispiel) tatsächlich um tabellarischen inhalt handelt wäre meiner meinung nach immer die <table> die richtige wahl. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage