Frage von giklo, 58

Wie kann ich mit Javascript eine Tabellenzeile dynamisch hinzufügen?

Ich habe eine einfaches Formular. Ich habe nun in diesem Formular eine kleine Tabelle mit Vorname und Nachname. Auf jeder Zeile kann man also eine Person eintragen. Nun soll, wenn man auf einen Link/Button (egal was) eine weitere Zeile hinzugefügt werden, sodass man auf bedarf mehrere Personen eintragen kann. Ich bin fast fölliger anfänger, was javascript betrifft. Die eingetragenen Werte werden anschliessend in einer Datenbank gespeichert. Das ist jedoch kein Problem. PHP beherrsche ich ausreichend. Jedoch muss daher bei jeder hinzugefügten Zeile, der name tag angepasst werden, sodass ich danach alle Inputs separat auslesen kann.

PS: Wenns geht, würd ich auch gerne die Anzahl beschränken, sodass man nicht unendlich Personen eintragen kann.

Kann mir da jemand ein Codebeispiel geben, mit dem ich was anfangen kann? Aus denen, die ich gefunden hab, bin ich nicht schlau geworden

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von userfromberlin, 58

Habe Dir ein kommentiertes jsFiddle erstellt. Stehe für Rückfragen zur Verfügung! http://jsfiddle.net/IgelJ/x7f070ne/1/

Kommentar von giklo ,

Das ist genau das, was ich gesucht habe. Jetzt habe ich jedoch noch ein kleines Problemchen ^^. Ich habe den Code so angepasst, dass es auf mein beispiel passt. Kann man zusätzlich zu den inputs auch jedes mal ein <tr><td></td></tr> erstellen? sonst verzieht es mir die ganze Tabelle. Ausserdem funkioniert das mit dem input_location tag nicht so, wie es bei jsfiddle klappt. Bei mir passiert einfach gar nichts. Ich habe den Code so reingeschrieben und dann 1x1 kopiert.

http://jsfiddle.net/x7f070ne/3/

PS: Was meinst du mit math.round()?

Kommentar von userfromberlin ,

Ich werde mir das fiddle mal ansehen.

Math.round() ist dafür gedacht, wenn Du später einen weiteren Input reinmachst, zB Doktortitel, aber vergisst, dass die Anzahl der Inputs geteilt durch 2 dann nicht mehr gerade ist! Also eine Vorsichtsmaßnahme für späteres, vergessliches Nacharbeiten. PS: math.round bedeutet zb aus 2,3 wird 2 und aus 4,67 wird 5.

Kommentar von userfromberlin ,
Kommentar von giklo ,

Ich habs jetzt so gemacht wie im jsfiddle. Das funktioniert auch. Aber nur, wenn der Button nicht innerhalb des <form> Tags ist. Der Button sollte jedoch, damit man überhaupt draus kommt direkt bei den einzufügenden inputs befinden. Denn es gibt noch 15 andere Inputs die davor oder danach kommen.

Kommentar von giklo ,

Ok ich hab herausgefunden, wieso bei mir das mit dem hinzufügen nicht funktioniert. Der Button ist innerhalb des Formulars... Sobald ich ihn rausnehme, geht der button.

Geht das auch irgendwie anders? Ich sehe keine Möglichkeit, den Button bei den Feldern zu plazieren, ohne dass er im <form> tag ist

Kommentar von userfromberlin ,

http://jsfiddle.net/IgelJ/50v5L4pe/3/ ist nun geupdated. Ich hatte type="button" vergessen anzugeben. Der type wurde deswegen auf "submit" gesetzt.

Kommentar von userfromberlin ,

Siehe http://jsfiddle.net/IgelJ/68vearq0/1/ für eine Schönheitskorrektur

Kommentar von giklo ,

Okey also irgendetwas mache ich immer noch falsch. Im JSfiddle funktioniert es. Aber egal wie ich es probiere, in meinem Skript funktioniert es nicht... Ich hab mir mal die Mühe gemacht und alles in JSfiddle geladen. und dort funkioniert es auch nicht. (Ich werde den Link hier aus privaten Gründen nicht posten).

In der Konsole bekomme ich immer folgende Fehlermeldung:

Uncaught NotFoundError: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node.

Wo genau muss ich meinen Fehler suchen?

Kommentar von userfromberlin ,

Du darfst nicht body.insertBefore(...) oder document.insertBefore(...) wählen, sondern musst das direkte Elternelement vor den Punkt setzten Also:

<div id="vater"><div id="sohn"></div></div>
var tochter = //neues Element;
document.getElementById("vater").insertBefore(tochter, document.getElementById("sohn"));
Kommentar von giklo ,

Ok super so klappts ^^

Jetzt hab ich nur noch das Problem, dass die inputs immer zusammengepresst werden... Aber das krieg ich schon irgendwie selbst hin.

Vielen Dank ; )

Antwort
von JuliaAnd, 40

Hallo! Du kannst diese Arbeit ein bischer leicher machen. Hier gibt es einige Beispiele mit dem Code http://webix.com/widget/datatable/. Du kannst das kostenlos download

Keine passende Antwort gefunden?

Fragen Sie die Community