Formular modifizieren

[*jiriki*]

Hi,

ich bin dabei, ein Formular zu erstellen, über das Züchter Ihre Hengste anmelden können, und dabei alle bisherigen Platzierungen des selbigen auflisten können sollen.
Ich will das mit Javascript realisieren und hab mir dazu überlegt, dass der Züchter über ein Select-Feld die Anzahl der Platzierungen auswählt, und sich dann dementsprechend die Anzahl an Tabellenzeilen mit Fomular-Input-Feldern in der zugeh. Tabelle "platzierungen" auflisten.

Dazu hab ich mir jetzt eine kleine Hava-Funktion geschrieben, die mir im ersten Anlauf die Tabellezeilen bis auf den Tabellenkopf leert (mit "table.deleteRow(i)", klappt) und dann im zweiten Schritt entsprechend viele Zeilen hinzufügt( mit "table.insertRow(i)" etc., klappt nicht).

Das Problem ist, dass ich nicht genau herausfinden kann, wie man Tabellenzeilen dann mit Tabellenzellen, und die Tabellenzellen dann mit Formularfeldern füllen kann in Javascript.

Hier mal mein bisheriger Ansatz:

<-- Script -->

function add() {

var s = document.getElementById("shows");
  var r = document.blubb.res;

/* Tabellenzeilen löschen, klappt */
  for( var i=s.rows.length-1; i>0; i-- )
  {
    s.deleteRow(i);
  }

/* Tabellenzeilen, -zellen und Inputfelder hinzufügen */
  for( var j=1; j<=r.value; j++ )
  {

/* Tabellenzeile einfügen, klappt */
    var TR = s.insertRow(j);

/* Tabellenzelle erzeugen, klappt */
    var TD1, TD2, TD3, TD4 = document.createElement("td");

/* Zelleneigenschaft "class" setzen, klappt nicht */
    TD1.className = TD2.className = TD3.className = TD4.className = "kapitel_list grey m center";

/* Input-Element erzeugen, klappt */
    var TD1input, TD2input, TD3input, TD4input = document.createElement("input");

/* Input-Eigenschaft "type" setzen, klappt nicht */
    TD1input.type, TD2input.type, TD3input.type, TD4input.type = "text";

/* Input-Eigenschaft "style" setzen, klappt nicht */
    TD1input.style, TD2input.style, TD3input.style, TD4input.style = "width:96%";

/* Folgende Input-Eigenschaften kann ich auch nicht setzen */
    TD1input.name = "year"+j;
    TD2input.name = "show"+j;
    TD3input.name = "level"+j;
    TD4input.name = "result"+j;
    TD1input.maxLength = "4";
    TD2input.maxLength = "30";
    TD3input.maxLength = "20";
    TD4input.maxLength = "20";

/* Input-Felder an Tabellenzelle als Sohn anhängen, klappt nicht */
    TD1.appendChild(TD1input);
    TD2.appendChild(TD2input);
    TD3.appendChild(TD3input);
    TD4.appendChild(TD4input);

/* Tabellenzelle als Kind an Tabellenzeile anhängen klappt auch nicht */
    TR.appendChild(TD1);
    TR.appendChild(TD2);
    TR.appendChild(TD3);
    TR.appendChild(TD4);*/
  }
}

<-- Script -->

Danke, *jiriki*

[*jiriki*]

Es lag daran, dass die Zeile

var TD1input, TD2input, TD3input, TD4input = document.createElement("input");

nur der Variable "TD4input" den Werte "document.createElement("input")" zuweist.

Stattdessen muss man jede Variable einzeln initialisieren:

var TD1input = document.createElement("input");
var TD2input = document.createElement("input");
var TD3input = document.createElement("input");
var TD4input = document.createElement("input");

Ging das bei Java nicht wie oben versucht?

----
Weitere Frage:

Ich hab den Event-Handler "onchange" bei dem Form-Tag platziert, nicht bei dem Select-Tag, weil der Firefox sonst nicht drauf reagiert hat. Leider reagiert der IExplorer da jetzt überhaupt nicht drauf. Weder, beim einen noch beim andren Tag.

Hier ist mal das Formular im groben Zusammenschnitt:

<-- SCRIPT -->
<form action="" method="post" name="blubb">
 <table>
 <tr>
 <td>Stallion:</td><td><input name="name" type="text"></td>
 </tr>
 <tr>
 <td>currently ...:</td>
 <td>
 <select name="current" size="1">
 <option>competing</option>
 <option>not competing</option>
 <option>retired</option>
 </select>
 </td>
 </tr>
 <tr>
 <td>Show results:</td>
 <td class="kapitel_list grey2 m">
 <select name="res" id="res" size="1" onchange="add()">
 <option value="1">1</option>
 <option value="2">2</option>
 </select> #
 </td>
 </tr>
 <tr>
 <td>
 <table width="100%" cellspacing="0" align="center" id="shows" name="shows">
 <tr>
 <td>Year</td>
 <td>Show</td>
 <td>Level</td>
 <td>Result (Place/%)</td>
 </tr>
 <tr>
 <td><input name="year0" type="text"></td>
 <td><input name="show0" type="text"></td>
 <td><input name="level0" type="text"></td>
 <td><input name="result0" type="text"></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td><input type="submit" name="submit" value="Submit"></td>
 </tr>
</table>
</form>
<-- SCRIPT -->

Ich bin für jeden Hinweis dankbar. Gruß, *jiriki*

[Marian]

Hi jiriki,

Ging das bei Java nicht wie oben versucht?

Java ist NICHT JavaScript!

Gruß, Marian

[*jiriki*]

Richtig. Heisst das jetzt, dass es in Java funktioniert, oder nicht?