"We are back" « oc.at

listeneintrag per Javascript hinzufügen?

Umlüx 12.04.2006 - 11:11 3504 26
Posts

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 9042
ich würde gerne ein formular zur kilometergeldabrechnung im intranet realisieren.
hab also eine tabelle erstellt mit 5 zeilen mit jeweils inputfeldern für ziel, zweck, datum, kilometer etc..

jetzt wärs aber fein, sollten die 5 nicht reichen, dass man per knopfdruck und Javascript eine neue zeile anhängt.

wie realisiere ich sowas? ich bin leider ein JS ei...

Luzandro

Here to stay
Avatar
Registered: Mar 2006
Location: 2482
Posts: 708
vereinfacht sollte das so möglich sein:
Code:
function addInput() {
        newInput = document.createElement("input");
        newInput.type  = "text";
        document.forms[0].appendChild(newInput);
}

http://de.selfhtml.org/javascript/objekte/index.htm
http://developer.mozilla.org/en/doc...o_DOM_Reference

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 9042
und der weiss da von selber wo er das einfügt? ich blick da ned ganz durch

Luzandro

Here to stay
Avatar
Registered: Mar 2006
Location: 2482
Posts: 708
Zitat von Umlüx
und der weiss da von selber wo er das einfügt? ich blick da ned ganz durch

dann halt noch ein link: http://de.wikipedia.org/wiki/Document_Object_Model

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 9042
jo aber wie sag ich wohin die neue zeile gehört?
mal für 5 jährige, ich hab meine tabelle. eine kopfzeile, 5 zeilen mit je 4 feldern und noch 3 zeilen für summe etc..
wie sag ich ihm dass er die neue zeile nach der 5. einfügt? bzw muss er das ja dynamisch rausfinden wenn ich gleich mehrmals eine einfüge.
wie zähl ich die zeilen? bzw wie übergeb ich das ziel der funktion?


und wie kann ich jetzt bei createElement("input") noch attribute wie name, value usw mit übergeben?
Bearbeitet von Umlüx am 12.04.2006, 15:36

Luzandro

Here to stay
Avatar
Registered: Mar 2006
Location: 2482
Posts: 708
Zitat von Umlüx
Zitat von Spikx
Naja, so ein Image könnte man nur auf einem einzigen PC verwenden, aufgrund der Hardwarekonfiguration.
dass diese 5 jährigen immer nicht lesen können... ;)

Zitat
ich hab meine tabelle. eine kopfzeile, 5 zeilen mit je 4 feldern und noch 3 zeilen für summe etc..
du hast auf der wikipedia seite den dom-baum gesehen und kannst dir vorstellen, wie das in deinem fall aussieht? wenn nicht, für den firefox gibts zB einen DOM-inspector

du musst einerseits mal dem tbody eine id geben damit du direkt darauf zugreifen kannst (document.getElementById("blarb")), denn dort willst du ja eine zeile einfügen

Zitat
wie sag ich ihm dass er die neue zeile nach der 5. einfügt? bzw muss er das ja dynamisch rausfinden wenn ich gleich mehrmals eine einfüge.
nein muss er nicht - du kannst ja einfach vor dem rest was einfügen...
http://de.selfhtml.org/javascript/o...m#insert_before

vermutlich am einfachsten einen clone einer anderen zeile:
http://de.selfhtml.org/javascript/o....htm#clone_node

Zitat
und wie kann ich jetzt bei createElement("input") noch attribute wie name, value usw mit übergeben?
usw - was gibts denn da noch? ahja, z.B. "type" das ich eh in meiner antwort verwendet habe ;)

schau dir mal die selfhtml seiten an - dort hast du eigentl. ziemlich kompakt die antworten auf diese fragen..

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 9042
etwas zu kompakt für meinen gschmack..

mit ned lesen können hat das nix zu tun. bei dir klingt das alles so "weisst eh, eh klar, und fertig"
aber für mich is das 0 auf 100 in 1 sekunde..

also von der id der tabelle aus kann ich auf die weiteren unterobjekte zugreifen (tr's td's).

dann geb ich also der tr mit der summe eine id und benutz da das insert_before. klingt soweit logisch.

und attribute jeweils mit .type, .class usw übergeben? kann man das auf alle möglichen objekte anwenden?

hm ich werd einfach mal drauflos probieren. mal sehen was rauskommt.
danke
Bearbeitet von Umlüx am 12.04.2006, 16:09

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4490
Fuer viele hier sind das halt "die Basics", weil heutzutage diese Dinge Vorraussetzung sind dafuer. Wued niemandem einen Job geben im Bereich Web-UI Entwicklung wenn er net Ahnung davon haette. Somit ist die Latte der Erwartung hier im Forum natuerlich ein wenig groesser auch, also net unbedingt falsch verstehen.

Normalerweise werden Attribute mit setAttribute/getAttribute gesetzt, aber die Browser unterstuetzen das nicht in allen Versionen einheitlich, darum kann man direkt ueber die Properties darauf zugreifen, heisst domElement.type = 'irgendwas' ist das selbe wie wenn du an einem <input> das type="irgendwas" setzt. Bei "class" heisst aber "className", ist halt historisch bedingt. D.h. bei allen Browsern kannst du domElement.className setzen, bei einigen moderneren gehts auch ueber domElement.setAttribute('class', 'value'); . Kann schon verwirrend sein ;)

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 9042
verwirrend, aber ich denk ich weiss bescheid. dank dir, jetzt komm ich wieder weiter.

Mit Objektorientierter Programmierung steh ich schon seit den ersten C Stunden in der HTML auf Kriegsfuß :D deswegen tu ich mir da immer noch sehr schwer und versuchs immer zu umgehen wo halt möglich...

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 9042
soweit sogut, doch noch ein problem gibts wo ich momentan nicht weiterkomme.
wie übergebe ich noch sowas wie:
Code:
onKeyup="calc();"
ans neue inputfeld?
Bearbeitet von Umlüx am 19.04.2006, 12:15

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4490
Im Javascript?
Code:
var dInput = document.createElement('input');
// funktioniert ueberall
dInput.onkeyup = calc;
// oder moderne browser ausser IE
dInput.addEventListener('keyup', calc, false);
// oder IE
dInput.attachEvent('onkeyup', calc);
HTH

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 9042
habs grad mit createAttribute hinbekommen
aber danke für die schnelle hilfe :D

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4490
Aber aufpassen, nicht alle Browser unterstuetzen dies:
http://de.selfhtml.org/javascript/o...reate_attribute

Darum ists meistens das beste auf den gemeinsamen Nenner zurueckzugreifen, welcher dInput.onkeyup waere.

lG

Umlüx

Huge Metal Fan
Avatar
Registered: Jun 2001
Location: Kärnten
Posts: 9042
habs mit Opera und IE6 getestet, da gehts zumindest. dafür liest er mir jetzt die value von den neuen inputs ned aus.. "..ist null oder kein objekt"
also wieder zurück an den anfang..

Rektal

Here to stay
Registered: Dec 2002
Location: Inside
Posts: 4490
KISS! :-)
Kontakt | Unser Forum | Über overclockers.at | Impressum | Datenschutz