Normale Ansicht, bei Klick Edit-Mode - Wie geht das?

M

Memfis

Erfahrenes Mitglied
Ich bin mir nicht sicher, ob das mit HTML überhaupt funktioniert, ob man da mit CSS nachhelfen kann oder man gleich eine andere Sprache wie Javascript oder Ajax verwenden muss. Ich habe den Beitrag jetzt hier gepostet um auch zu verdeutlichen, dass ich eine wirklich einfache Lösung suche.

Es geht darum, dass ich eine Datenbank mit diversen Einträgen habe. Diese lasse ich mir tabellarisch darstellen. Das Design der Tabelle wird über eine CSS-Datei gesteuert. Nun möchte ich, dass wenn ich auf einen Eintrag einen Klick oder Doppelklick mache sich die Zelle in ein <input>-Feld ändert und ich den Eintrag ändern kann. Mit "Enter" soll die Änderung dann übernommen werden, mit "Esc" der Vorgang abgebrochen werden. Die Änderung in der Datenbank erfolgt mittels PHP/MySQL

Wie kann ich das umsetzen? Geht das überhaupt? Ich bin für ziemlich alles offen, aber ich möchte keinesfalls Java-Script einsetzen. Am liebsten wäre mir eine Lösung mit HTML/CSS, aber ich habe meine Zweifel ob das damit geht.

Edit: Alternativ habe ich mir überlegt könnte ich die Tabelle bereits mit normalen <input>-Feldern ausstatten und anzeigen lassen und mittels CSS dein Eindruck erzeugen, dass es kein <input>-Feld ist. Wenn man dann in die Zelle klickt ändert sich das aussehen und es wird deutlich, dass man den Eintrag ändern kann. (Geht das überhaupt?) Stellt sich nur die Frage wie man dann die Änderung mit "Enter" in die Datenbank bekommt.
 
Zuletzt bearbeitet:
Danke, aber das ist mit JavaScript und das wollte ich wirklich vermeiden. Mittlerweile bin ich meiner Vorstellung auch alleine schon ziemlich nahe gekommen, aber ich habe noch das Problem, dass das <input>-Feld sich nicht automatisch der Länge des Textes anpasst. Das <input>-Feld ist von <td>-Tags umgeben, aber ich kann machen was ich will. Entweder sprengt es mir mit "<td width=100%"> die gesamte Tabelle oder mit "<input width=100%"> passiert gar nichts.
 
Wie kann ich das machen? Also ich möchte, dass das <input>-Feld so lange ist wie der Text darin. Bei einer Tabelle passiert das automatisch (<td>-Tags). Dadurch, dass ich jetzt innerhalb der <td>-Tags das <input> habe wird die Zelle eben auf das Standardmaß des <input>-Feldes reduziert, da die Länge des Textes scheinbar nicht mehr erkannt wird. <input size="100%"> hilft auch nicht. Zwar wird das <input>-Feld und damit die Zelle jetzt länger, aber leider viel zu viel.
 
Das Attribut "size" gibt aber auch nur die Zeichenlänge an, nicht die geometrische Breite. Die Frage ist jetzt, ob du nur einzeiligen Text brauchst oder mehr. Für letzteren Fall solltest du wohl eher das Element "textarea" nutzen.
 
Dann versuche mal folgendes (das sollte die Breite des Eingabefeldes an die Breite der Tabellenzelle anpassen):
CSS: 
td > input
{
  width: inherit;
}
 
Komisch, also ich habe es gerade noch einmal ausprobiert und es ging. Vielleicht sieht dein Quelltext anders aus und die Regel wird dementsprechend nicht darauf angegewendet.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück