Input type ändern

[Kinght]

Moin Leute,

ich hab gerade erst angefangen mit javascript zu programmieren und hab eine grundlegende Frage. Ist es per Javascript möglich in einer Tabelle einen Wert z.b: Maximum in ein input feld umzuwandeln. Ich möchte kein neues Template anlegen sondern im gleichen Template weiterarbeiten.

In meinem  Beispiel steht zum Beispiel 3000 und per klick auf ein edit button soll man den Wert editieren können.

THX for answers

MFG Knight

[Knight]

sry ich muss noch anmerken: Die Lösung muss für Mozilla Firefox und Internet Explorer funktionieren

[suit]

sry ich muss noch anmerken: Die Lösung muss für Mozilla Firefox und Internet Explorer funktionieren

das musst du nicht anmerken, wenn nichts anderes gesagt wird, geht man davon aus, dass es überall funktionieren soll (zumindest in marktrelevanten browsern)

[suit]

In meinem  Beispiel steht zum Beispiel 3000 und per klick auf ein edit button soll man den Wert editieren können.

du willst also einen wert in einer tabelle beim draufklicken zu einem formularfeld umbauen, den wert ändern und dann speichern können?

das geht mit javascript allein nicht, du benötigst zumindest eine serverseitige sprache - php zb

dein lösungsansatz wird "irgendwas mit ajax" zu tun haben

[Knight]

In meinem  Beispiel steht zum Beispiel 3000 und per klick auf ein edit button soll man den Wert editieren können.

du willst also einen wert in einer tabelle beim draufklicken zu einem formularfeld umbauen, den wert ändern und dann speichern können?

das geht mit javascript allein nicht, du benötigst zumindest eine serverseitige sprache - php zb

dein lösungsansatz wird "irgendwas mit ajax" zu tun haben

ja ich arbeite mit perl, mysql etc.

Mir geht es nur darum den Typ zu ändern das abspeichern ist dann kein problem mehr :-)

[suit]

Mir geht es nur darum den Typ zu ändern das abspeichern ist dann kein problem mehr :-)

den typ eines inputfeldes darfst du afaik nachträglich nicht mehr ändern - du kannst aber ein völlig neues inputfeld erzeugen, welches du dann für deine zwecke verwendest

[Knight]

Mir geht es nur darum den Typ zu ändern das abspeichern ist dann kein problem mehr :-)

den typ eines inputfeldes darfst du afaik nachträglich nicht mehr ändern - du kannst aber ein völlig neues inputfeld erzeugen, welches du dann für deine zwecke verwendest

ok aber das soll ja im selben td feld erscheinen... wie soll ich das bisherige td feld dann löschen kann man td feldern ids vergeben?

[suit]

ok aber das soll ja im selben td feld erscheinen... wie soll ich das bisherige td feld dann löschen kann man td feldern ids vergeben?

die referenz auf das aktuelle feld kannst du ohnehin mit this herstellen, dafür brauchst du keine id

aus seiner position kannst du dann ermitteln, welcher datensatz es ist - du entfernst einfach den inhalt der tabellenzelle und ersetzt ihn durch ein formular, dann verspeicherst du das serverseitung und machst deine "änderung" mit dem neuen wert wieder rückgängig

btw: deine frage versteh ich nicht ganz

  
<form>  
[...]  
<td onclick="aenderemich(this);">3000</td>  
[...]  
</form>  

aenderemich() ermittelt die id des datensatzes bzw der zelle macht das daraus das hier

  
<form>  
[...]  
<td><input type="text" value="3000" id="zelle12496" /><input type="submit" value="speichern" /></td>  
[...]  
</form>  
  

siehts dann meinetwegen so aus

  
<form>  
[...]  
<td onclick="aenderemich(this);">5000</td>  
[...]  
</form>  

[JürgenB]

Hallo Knight,

du benötigst (u.A.):

http://de.selfhtml.org/javascript/objekte/document.htm
http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id o.Ä.
http://de.selfhtml.org/javascript/objekte/document.htm#create_element
http://de.selfhtml.org/javascript/objekte/node.htm
http://de.selfhtml.org/javascript/objekte/node.htm#first_child
http://de.selfhtml.org/javascript/objekte/node.htm#data
http://de.selfhtml.org/javascript/objekte/node.htm#append_child
http://de.selfhtml.org/javascript/objekte/node.htm#replace_child
http://de.selfhtml.org/javascript/objekte/elements.htm#value

Gruß, Jürgen

[suit]

http://de.selfhtml.org/javascript/objekte/document.htm#get_element_by_id o.Ä.

this reicht ;)

http://de.selfhtml.org/javascript/objekte/document.htm#create_element
http://de.selfhtml.org/javascript/objekte/node.htm
http://de.selfhtml.org/javascript/objekte/node.htm#first_child
http://de.selfhtml.org/javascript/objekte/node.htm#data
http://de.selfhtml.org/javascript/objekte/node.htm#append_child
http://de.selfhtml.org/javascript/objekte/node.htm#replace_child

innerHTML reicht imho auch aus ;)

[JürgenB]

Hallo suit,

innerHTML reicht imho auch aus ;)

ist aber unsportlich :)

Gruß, Jürgen

[suit]

innerHTML reicht imho auch aus ;)
ist aber unsportlich :)

inwiefen?

[JürgenB]

Hallo suit,

innerHTML reicht imho auch aus ;)
ist aber unsportlich :)
inwiefen?

wenn man neue Elemente per createElement, appendChild, etc. in den DOM-Baum einhängt, zeigt man dem Quelltextleser, das hier jemand mit Ahnung am Werk war. innerHTML ist wie abschreiben beim Nachbarn. :)

Gruß, Jürgen

PS innerhtml wird ja inzwischen von allen "verbreiteten" Browsern unterstützt. Aber wie sieht es mit der Normung aus?

PS2 Bei xml-Konstrukten (AJAX) wird innerHTML aber nicht unterstützt.

[suit]

wenn man neue Elemente per createElement, appendChild, etc. in den DOM-Baum einhängt, zeigt man dem Quelltextleser, das hier jemand mit Ahnung am Werk war. innerHTML ist wie abschreiben beim Nachbarn. :)

auch wenn man dadurch 1 zeile auf 10 zeilen aufbläst? :)

[JürgenB]

Hallo suit,

auch wenn man dadurch 1 zeile auf 10 zeilen aufbläst? :)

ja. Es geht ja schließlich ums Prinzip.

Aber jetzt mal im Ernst: Ich habe vor einiger Zeit mal Geschwindigkeitsmessungen bei diesen beiden Seiten gemacht:

http://www.j-berkemeier.de/LogistischeAbbildung.html und
http://www.j-berkemeier.de/TableSort.html

Dabei ist innerHTML doch einiges langsamer als die DOM-Methoden. Aber das sind auch keine typischen Anwendungen.

Gruß, Jürgen

[molily]

wenn man neue Elemente per createElement, appendChild, etc. in den DOM-Baum einhängt, zeigt man dem Quelltextleser, das hier jemand mit Ahnung am Werk war.

Wer sich mit DOM einen Wolf codet anstatt dort, wo es angebracht ist, innerHTML zu verwenden, zeigt dem Quelltextleser, dass jemand am Werk war, der gerne Eindruck schinden will, ohne wirklich Ahnung zu haben. ;)

PS innerhtml wird ja inzwischen von allen "verbreiteten" Browsern unterstützt. Aber wie sieht es mit der Normung aus?

Wird mit HTML 5 normiert.

PS2 Bei xml-Konstrukten (AJAX) wird innerHTML aber nicht unterstützt.

Was meinst du?
innerHTML dient vor allem zum Schreiben von HTML-Code ins bestehende Dokument.
Klar, wenn ich mit XMLHttpRequest ein XML-Dokument lade, steht mir nur das Core-DOM zur Verfügung. Nichts weiter und schon gar nicht innerHTML. Aber warum sollte man auch innerHTML zum Auslesen von XML-Dokumenten verwenden? Dann würde man nicht XML verwenden, sondern JSON mit HTML-Strings.

Mathias

[JürgenB]

Hallo molily,

Wer sich mit DOM einen Wolf codet anstatt dort, wo es angebracht ist, innerHTML zu verwenden, zeigt dem Quelltextleser, dass jemand am Werk war, der gerne Eindruck schinden will, ohne wirklich Ahnung zu haben. ;)

eben :)

PS2 Bei xml-Konstrukten (AJAX) wird innerHTML aber nicht unterstützt.

Was meinst du?

ich habe in einem per AJAX geladenen xml-Document (GPX) in einem Textknoten (cmt) html-Elemente, die ich am liebsten der Einfacheit halber mit innerHTML im HTML-Teil angezeigt hätte.

Bisher habe ich hierzu nur etwas über Serialisieren gefunden, aber vieleicht ist dieser Thread ja hilfreich.

Gruß, Jürgen