HTML JavaScript dynamische Elemente hinzufügen - Tabelle - weitere Felder - Formular - Zeilen - Zellen

Mitglied: Midivirus

Midivirus (Level 2) - Jetzt verbinden

03.08.2011, aktualisiert 05.08.2011, 16599 Aufrufe, 6 Kommentare

Guten Morgen,

da ich aktuell viel mit JS experimentiere und seit langem eine Lösung für dies suche,
hab ich über Suchmaschinen mal folgende Beispiele gefunden, die funktionieren, ich aber dank der Kenntnisse, keine Erweiterung vornehmen kann.

Siehe hier: http://jsfiddle.net/3rwRH/ (unterer Teil des Beispiels)
http://jsfiddle.net/t5Ayg/ (oberer Teil des Beispiels)

Das obere Skript war ursprünglich dafür gedacht, mehrere Dateien hochzuladen.
Bei dem zweiten werden einfach immer ein Input-Feld angehängt.

Ich suche also folgendes:
Es ist eine Tabelle gegeben, diese hat 5 Spalten und erstmal eine Zeile.
Möchte der Benutzer jetzt aber in dem Auftrag mehr als eine Position haben, könnte man weitere Zeilen über JS nachladen / generieren.

Alternativ hätte ich jetzt gedacht, dass vorher gefragt wird, wie viele Zeilen benötigt werden, diese dann erzeugt werden.
Die zweite Möglichkeit find ich aber nicht so WEB 2.0 freundlich. Man denke jetzt einfach mal an die GUI von GMail! (...)

Vielleicht weiß jemand, wie es klappt (...)

Grüße
Euer Midivirus

Quellen:
http://www.mediengestalter.info/forum/10/javascript-neue-formularfelder ...
Mitglied: EvilMoe
03.08.2011 um 11:01 Uhr
Hallo,

wir hatten ja schonmal das vergnüen ;)
Als erstes würde ich mich entscheiden was du nutzt, du mischst dort Jquery mit "reinem" javascript.
Die Zeile z.B. kannste auch mit Jquery wieder verkürzen. Funktioniert so war auch aber es wird dadurch extrem unübersichtlich.

Du möchtest also einen Link wenn man drauf klickt ein weiteres Input element erstellen?
Kein Problem. Ein Beispiel haste doch schon gefunden.


Ich habe noch ein einfaches Beispiel erstellt, vielleicht kommst du damit besser zurecht (form element fehlt, sollte ja schnell gehen;)).
Nach den klick auf "Mehr!" erstelle ich vor dem submit Button einfach ein neues Input Element.

Bitte warten ..
Mitglied: Midivirus
04.08.2011 um 10:43 Uhr
Wir grüßen dich.

Nun, ich es zusammenschmeiße liegt einfach daran, das ich mir das mit Google alles zusammensuche und ausprobiere, etwas Zeit dazu nehme und ein Ergebnis habe.
Dann nehm ich noch etwas Intelligenz, wie was heißen könnte. Hab damals mal Java lernen müssen, daher kann ich mit der Syntax etwas anfangen.

Aber mehr auch nicht. Bin eher für das einfache PHP, da kann man auch viel machen, ohne der Nutzer es mitbekommt, aber klar: mit AJAX muss man sich damit beschäfitgen. Soviel vorweg.

Hab den Code oben mal geändert, wie er jetzt ist.
Die Ausgabe stört mich noch etwas.
dd502226637bef30e4b1e76e8784d07c - Klicke auf das Bild, um es zu vergrößern

Dort wird einfach die Zeile immer vor dem Input eingefügt.

Du möchtest also einen Link wenn man drauf klickt ein weiteres Input element erstellen?
Kein Problem. Ein Beispiel haste doch schon gefunden.

Ziel soll es sein, so eine Tabelle zu haben, mit diversen Spalten und mit Klick wird einfach eine weitere Zeile hinzugefügt.
Ich nenn es jetzt mal nicht duplizieren, weil ich die HTML-Ausgabe ncoh etwas individuell lassen möchte.

Nach den klick auf "Mehr!" erstelle ich vor dem submit Button einfach ein neues Input Element.


Grüße
Midivirus

Und merci für deine Mühe, ist nicht selbstverständlich
Bitte warten ..
Mitglied: EvilMoe
04.08.2011 um 23:20 Uhr
Hallo,

das geht auch recht einfach.

Ungetestet
Bitte warten ..
Mitglied: Midivirus
05.08.2011 um 08:08 Uhr
Hossa :) face-smile

Okay, macht daneben immer eine neue Zelle dran.

Ziel bleibt es noch immer:
Eine ganze Zeile hinzufügen.

Beispiel an dem Bild oben:
Mit deinem Code bekomme ich rechts neben dem Button immer eine Zelle dazu.
Bei meiner Editierung halt zwei ... !

Aber ich hab in einem Tutorial gelesen, dass die Option ".html()" auch möglich ist. Damit müsste ja theoretisch ohne Probleme HTML-Code generieren lassen, der dann angezeigt wird?

Ich bastel noch etwas ... !


Bis dahin,
Midivirus
Bitte warten ..
Mitglied: EvilMoe
05.08.2011 um 09:54 Uhr
Hallo,

der Selektor ist auch falsch. Weil du dein Link und Button auch in der Tabelle hast muss die Zeile nicht mehr nach dem letzten td "$('tr_last').after" sondern du willst es davor haben.
Also heißt es nicht mehr "after" sondern "before" weil du deine Zeile ja davor haben möchtest.


Klar, before und after machen nichts anderes als HTML(). Nur mit der Anweisung noch ob du den Code vor einem Element oder nach einem Element haben möchtest. HTML würde direkt in das Element schreiben.
Bitte warten ..
Mitglied: Midivirus
05.08.2011 um 10:01 Uhr
hey @EvilMoe,

du bist genial.

Das, was ich wollte, klappt damit. Warum findet man das nicht über google mal ganz einfach im Netz? Was mein Grund war, hier ein Thema zu eröffnen (...)

Bis demnächst,
der J-Fummler Midi
Bitte warten ..
Heiß diskutierte Inhalte
Switche und Hubs
Probleme im Netzwerk Switche teilweise nicht erreichbar
hukimanVor 1 TagFrageSwitche und Hubs30 Kommentare

Guten Morgen, seit Monaten haben wir hier immer wieder Probleme mit dem Netzwerk, das Problem konnte ich leider aber noch immer nicht finden. Es ...

Erkennung und -Abwehr
Einer Malware auf der Spur. Benötige Sherlock Holmes!
streamVor 1 TagFrageErkennung und -Abwehr7 Kommentare

Guten Abend Wenn ich meine Windows-10-Kiste starte, so gibt mir mein Router eine Meldung aus, dass eine bestimmte IP-Adresse wegen Bösartigkeit geblockt wurde. Auf ...

Batch & Shell
Tabellarische Ausgabe der Netzwerkschnittstellen
gelöst dysti99Vor 1 TagFrageBatch & Shell19 Kommentare

Mit - ip a - werden ja die Netzwerkschnittstellen angezeigt. Ich möchte mit ein Batchscript folgende Ausgabe erreichen: 1 eth0 192.168.1.1 AD:13:67:56:14:D1 2 eth1 ...

Notebook & Zubehör
Tipp für festgefressene Scharniere bei Lenovo V120 Notebook?
LochkartenstanzerVor 13 StundenFrageNotebook & Zubehör18 Kommentare

Moin Kollegen, Ich habe hier ein Lenovo V120 mit einem laut Internet üblichen Problem von "festgefressenen" Scharnieren. Ich könnte jetzt aufwendig das Notebook zerlegen ...

Microsoft Office
Wechsel von Office - Exchange on premise zu Office 365 - Exchange Online
jann0rVor 22 StundenAllgemeinMicrosoft Office10 Kommentare

Moin, ich weiß nicht so richtig, unter welche Überschrift man dieses Thema hier am besten packen kann, daher mal als allg. Beitrag / Erfahrungsbericht. ...

Microsoft
MS Teams und Office im gemeinnützigen Verein
DanielBodenseeVor 1 TagFrageMicrosoft6 Kommentare

Hallo zusammen, ich würde gerne in unserem anerkannten gemeinnützigen Verein eine gemeinsame Platform aufbauen, über die wir Diskutieren und uns austauschen können, insbesondere bei ...

Linux Netzwerk
SAMBA FS Portfreigabe
gelöst Jannik2018Vor 1 TagFrageLinux Netzwerk17 Kommentare

Hallo zusammen, ich habe eine Portfreigabe für meinen SAMBA Server mit Netzwerkfreigaben auf port 445 TCP eingerichtet allerdings wenn ich per DNS oder externer ...

Netzwerkgrundlagen
Netzwerksaufbau bei nahezu auschließlichem Zugriff auf NAS bzw. Server
Ghent74Vor 1 TagFrageNetzwerkgrundlagen10 Kommentare

Hallo zusammen, in unserem kleinen Büro (6 Arbeitsplätze, Netzwerkdrucker, Netzwerkplotter, NAS) stellen immer mehr Softwarefirmen ihre Programme auf eine Art Datenbank um. Eine Art ...