Das Skript zeigt, wie ein Formular dynamisch erweitert werden kann. Der Benutzer kann anschließend neue Textfelder hinzufügen.

Ziel des Skripts

Oft reicht eine feste Anzahl von Eingabefeldern nicht aus. Ein typisches Beispiel ist eine Parametrierung.
Es ist von Anfang an nicht klar, wie viele Parameter verwendet werden, daher muss der Benutzer entscheiden können.

Das Skript bietet eine clientseitige Lösung.

Technischer Prozess

Das Formular wird in einer Tabelle angezeigt. Mit DOM werden der Tabelle neue Zeilen und Spalten hinzugefügt, und den Zellen werden neue Eingabefelder hinzugefügt.

Parameter

Nachname Beschreibung
function addParameter (table, rowIndex) Zwei Parameter: table und the line. Die Parameter werden von der Schaltfläche übernommen.

var row = table.insertRow (rowIndex); Fügen Sie der Tabelle eine neue Zeile hinzu

var cell = row.insertCell (0); Fügen Sie der Zeile eine neue Spalte hinzu

var text = document.createTextNode (‘Parameters:’); In die Spalte schreiben Sie den Text “Parameter:”

var input = document.createElement (‘INPUT’); Erstellen Sie das neue Textfeld

input.type = ‘text’; Legen Sie die Eigenschaften des Textfelds fest

input.type = ‘button’; Erstellen Sie die neue Schaltfläche

input.onclick = function () {addParameter (this.parentNode.parentNode.parentNode, this.parentNode.parentNode.rowIndex + 1); } Die Schaltfläche selbst ruft die Funktion zum Hinzufügen eines weiteren Parameters auf.
this.parentNode.parentNode.parentNode = die Tabelle – ab der Schaltfläche drei Hierarchien aufwärts
this.parentNode.parentNode.rowIndex = Zeile, in der sich die Schaltfläche befindet

Versionsgeschichte

Versionsgeschichte Versionsgeschichte
Versionsdatum Beschreibung
0.1 2004-07-12 20:17 Erste Veröffentlichung