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



## Memfis (27. Mai 2012)

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.


----------



## Parantatatam (27. Mai 2012)

Schau dir das mal hier an (habe ich gerade mal zusammen gebastelt): http://jsfiddle.net/MeiKatz/KZKVE/


----------



## Memfis (28. Mai 2012)

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.


----------



## Parantatatam (28. Mai 2012)

Das Attribut "width" gibt es bei input-Elementen nicht. Du müsstest das schon mit CSS lösen.


----------



## Memfis (28. Mai 2012)

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.


----------



## Parantatatam (28. Mai 2012)

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.


----------



## Memfis (28. Mai 2012)

Nein, ich brauche nur eine Zeile.


----------



## Parantatatam (28. Mai 2012)

Dann versuche mal folgendes (das sollte die Breite des Eingabefeldes an die Breite der Tabellenzelle anpassen):

```
td > input
{
  width: inherit;
}
```


----------



## Memfis (29. Mai 2012)

Leider nein. Funktioniert nicht.


----------



## Parantatatam (30. Mai 2012)

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.


----------



## Memfis (30. Mai 2012)

Ich probiere es auch nochmal bei einer einfachen Datei. Meine Scripte und die CSS-Datei haben schon eine gewisse Komplexität erreicht. Ist aber alles valide bislang


----------

