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