<table> dynamisch zur Laufzeit erweitern?

[Antragon]

Hallo Gemeinde.
Ich habe mich in diesem Forum in der Hoffnung registriert, dass ihr mir bei meinem derzeitigen Problem helfen könnt. Da ich im Bereich HTML und den anderen Bereichen des Webseitenbaus neu bin, stehe ich im Moment vor einem Problem, zu dem ich bisher keinerlei Lösung gefunden habe.

Zunächst Informationen zum Hintergrund:
Im Rahmen eines Praktikums programmiere ich gerade an einer Website, die dem Erstellen einer Umfrage dienen soll. Der Benutzer soll die Möglichkeit haben, während des Erstellungsprozesses weitere Auswahloptionen für die Umfrage hinzufügen zu können und genau dort liegt das Problem.

Zum Problem:
Um die Tabelle dynamisch zu erweitern, verwende ich einen Button, der bei einem Klick dem <table> einen weiteren Eintrag einfügt bzw. eher einfügen soll. Meine bisherigen Versuche dies zu realisieren haben leider nicht zum Erfolg geführt. Ich dachte schon an einen Umweg über JSP (was in dem Praktikumsprojekt auch Anwendung findet), denke aber, dass es vermutlich auch anders gehen könnte, ohne mit Kanonen auf Spatzen zu schießen - wie es im Volksmund so schön heißt.

Hier einmal ein Teil des HTML-Codes:

<script type="text/javascript">
            function addOption()
            {
                var optCounter = 0; // Anzahl bestehender Optionen ermitteln
                optCounter = document.all.choiceOptionTable.length+1;
                
                // Erste Tabellen-Zelle anlegen
                var optLabelCell = document.createElement("td");
                // Name des Elements hinzufügen
                optLabelCell.nodeName("Auswahloption");
                // Zweite Tabellen-Zelle anlegen
                var optInputCell = document.createElement("td");
                
                // Input-Feld anlegen
                var optInput = document.createElement("input"); // Input Eingabefeld anlegen
                // Name des Input-Eingabefeldes erstellen
                var optInputName = "choice_"+optCounter;
                // Attribute zum Input-Eingabefeldes hinzufügen
                optInput.setAttribute("type", "text");
                optInput.setAttribute("name", optInputName);
                optInput.setAttribute("size", "134");
                optInput.setAttribute("maxlength", "100");
                // Input Element in zweite Tabellen-Zelle einfügen
                optInputCell.appendChild(optInput);
                
                // Tabellenspalte anlegen
                var newOption = document.createElement("tr");
                // Elemente hinzufügen
                newOption.appendChild(optLabelCell);
                newOption.appendChild(optInputCell);
                
                // neu erstellten Tabelleneintrag hinzufügen
                choiceOptionTable.appendChild(newOption);
            }
</script>
<div id="createpollcontainer">
            <form name="createPollTable" onsubmit="sndCreatePollReq.jsp" method="post">
                <fieldset>
                    <legend><h3>Umfrage erstellen</h3></legend>
                    <table class="borderlessTable">
                        <tr>
                            <td>Umfragetitel (max. 255 Zeichen)</td>
                            <td><input type="text" name="pollTitle" size="134" maxlength="255"/></td>
                        </tr>
                        <tr>
                            <td>Umfragebeschreibung (max. 2000 Zeichen)</td>
                            <td><textarea name="pollDescription" cols="100" rows="20"></textarea></td>
                        </tr>
                        <tr>
                            <th colspan="2">Auswahloptionen</th>
                        </tr>
                        <form name="choiceOptionTable">
                            <tr>
                                <td>Auswahloption</td>
                                <td><input type="text" name="choice_1" size="134" maxlength="100"/></td>
                            </tr>
                            <tr>
                                <td>Auswahloption</td>
                                <td><input type="text" name="choice_2" size="134" maxlength="100"/></td>
                            </tr>
                            <tr>
                                <td colspan="2" align="center"><input type="button" name="moreOptions" value="Weitere Optionen hinzufügen" onClick="addOption()"/></td>
                            </tr>
                        </form>
                        <tr>
                          <th colspan="2">Allgemeines</th>
                        </tr>
                        <tr>
                            <td>Teilnehmer Passwort</td>
                            <td><input type="text" name="participatePwd" size="134" maxlength="100"/></td>
                        </tr>
                        <tr>
                            <td>Ersteller Passwort</td>
                            <td><input type="text" name="createPwd" size="134" maxlength="100"/></td>
                        </tr>
                        <tr>
                            <td>Mehrfachauswahl möglich</td>
                            <td><input type="checkbox" name="multipleChoice" value="Mehrfachauswahl möglich"></td>
                        </tr>
                        <tr>
                            <td colspan="2" align="center"><input type="submit" name="createPoll" value="Umfrage erstellen" align="center"/></td>
                        </tr>
                    </table>
                </fieldset>
            </form>
        </div>

Ich hoffe, es gibt eines Lösung und ihr könnte mir bei meinem Problem helfen.

Grüße, Antragon

 

[mermshaus]

Willkommen im Forum.

Welche Fehlermeldung erhältst du denn (Stichwort: Fehlerkonsole des Browsers)?

In diesem Fall:

document.all.choiceOptionTable is undefined
http://localhost/other/d.php
Line 5

Die Syntax stimmt nicht.

Theoretisch wohl so was:

                optCounter = document.getElementsByName('choiceOptionTable')[0]
                        .getElementsByTagName('tr').length + 1;

Das klappt aber auch nicht, weil dein HTML-Code nicht valide ist.

- The W3C Markup Validation Service

Du kannst kein form-Element direkt in ein table-Element schachteln.

 

[Antragon]

Danke für die Antwort - vor allem in Bezug auf den nicht validen HTML-Code.

Die Frage die allerdings noch bleibt ist, ob man mein Vorhaben mit standard HTML Mitteln realisieren kann, oder ob ich ggf. doch mittels JSP arbeiten sollte?!

Grüße, Antragon

 

[mermshaus]

Wenn du JavaScript zu HTML-Standardmitteln zählst (Tipp: Schau dir mal jQuery an), brauchst du für das dynamische Hinzufügen von Elementen nicht zwingend auf serverseitige Technologien auszuweichen.

JavaScript kann allerdings bei Clients deaktiviert oder unter Umständen auch gar nicht vorhanden sein.

- Unobtrusive JavaScript

Das ist eine Überlegung für den Hinterkopf.

Die Persistierung der Eingaben (also das Abspeichern) musst du ja so oder so serverseitig durchführen. Dort muss selbstverständlich auch noch einmal eine Validierung stattfinden, denn ein Client kann dir beliebige Sachen schicken.

 

[threadi]

Noch ein Hinweis: Ich würde ohne Tabelle arbeiten, vor allem wenn Du diese per JavaScript bearbeiten willst. Die Browser verarbeiten Tabellen teilweise unterschiedlich wenn sie per JavaScript bearbeitet oder hinzugefügt werden. Verwende lieber tabellenlosen Code, auch weil es sich ja nicht um tabellarische Daten handelt die Du dort erfassen willst. Dadurch verringert sich auch der Umfang des JavaScripts etwas und es dürfte auch sicherer in verschiedenen Browsern laufen.

 

[Antragon]

Wenn du JavaScript zu HTML-Standardmitteln zählst (Tipp: Schau dir mal jQuery an), brauchst du für das dynamische Hinzufügen von Elementen nicht zwingend auf serverseitige Technologien auszuweichen.

JavaScript kann allerdings bei Clients deaktiviert oder unter Umständen auch gar nicht vorhanden sein.

Als "Präsentation" würde JacaScript ausreichend sein, allerdings weiß ich auch, dass JavaScript nicht immer problemlos verwendet werden kann (Stichwort: Script-Blocker-PlugIns, JavaScript deaktiviert).
Allerdings habe ich auch nicht die Zeit, mich noch großartig mit jQuery auseinanderzusetzen - Klausuren stehen an, das "Programm" soll auch bald fertig sein und dann kommt noch ein weiteres Praktikum hinzu, für das ich auch noch programmiere.

Noch ein Hinweis: Ich würde ohne Tabelle arbeiten, vor allem wenn Du diese per JavaScript bearbeiten willst. Die Browser verarbeiten Tabellen teilweise unterschiedlich wenn sie per JavaScript bearbeitet oder hinzugefügt werden. Verwende lieber tabellenlosen Code, auch weil es sich ja nicht um tabellarische Daten handelt die Du dort erfassen willst. Dadurch verringert sich auch der Umfang des JavaScripts etwas und es dürfte auch sicherer in verschiedenen Browsern laufen.

Mir fiel bisher keine bessere Lösung ein, um die Elemente auch gleichmäßig neben- und untereinander zu positionieren. Wie Eingangs erwähnt, habe ich noch nicht wirklich viel Ahnung von HTML, JavaScript und dergleichen. Was wäre denn eine alternative zum <table>? Der Vorteil dabei war ja, dass ich die Buttons zentral über zwei Spalten spannen und diesen zentral setzen konnte.

Könnte mir da ggf. jemand ein Grundgerüst posten?
Also in Bezug auf meinen Table sowas in der Art:

<table>
    <tr>
        <td>linke Spalte</td>
        <td>rechte Spalte</td>
    </tr>
</table>

Auf der Basis könnte ich dann ggf. weiter entwickeln und auch eine andere Lösung für mein Problem finden.

Grüße, Antragon

 

[threadi]

Du hast ja immer nur Beschriftung des Formularfelds neben dem Formularfeld selbst. Das würde ich so formulieren:

<fieldset>
<label for="feldid">Beschriftung</label>
<input type="text" name="feldname" id="feldid" value="" />
</fieldset>

Per CSS müsstest Du ersterem dann nur eine feste Breite geben - schon hast Du immer die Beschriftung und die Felder auf einer Linie. Das <fieldset> sollte nicht wie in meinem Beispiel um ein Feld+Beschriftung sondern um eine thematisch zusammengehörende Gruppe Formularfelder liegen.

 

[Antragon]

Vielen Danke für die Hilfe.
Ich hoffe, dass ich damit mein Problem werde lösen können - ein weiteres Problem wird dann das iterative auslesen der Auswahloptionen werden, aber damit muss ich mich wohl erst dann auseinandersetzen, wenn ich es geschafft habe, mit Hilfe des Buttons weitere Auswahloptionen einzufügen.

Grüße, Antragon