PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : HTML u. Javascript - Tabelle aus Javascript array erzeugen/füllen


(del)
2011-07-11, 15:26:27
Ich stoße mit meinen begrenzten Webdesignkenntnissen hier gerade an eine Grenze.

Folgende Situation:
Eine HTML-Seite mit mehreren Textboxen als Eingabefelder, die einen Anfangswert haben und vom Benutzer auch verändert werden können. Teilweise sind die Werte der Textboxen voneinander abhängig und werden bei Änderung eines Wertes neu berechnet.

Aus allen Werten dieser Textboxen lässt sich nun eine große Anzahl weiterer Werte erzeugen, die ich gerne nach Klick auf einen Button unter den bestehenden Textboxes anzeigen möchte. Die Berechnung erfolgt per Javascript, die Ergebnisse liegen in einem Array vor.

Kann ich auf einfache Art und Weise eine Tabelle erzeugen und unten einfügen? Meine bisherigen Versuche scheitern an der Formatierung der Tabelle (Zeilenumbruch, etc.).


Was wäre aus eurer Sicht hier der einfachste Weg?

Marscel
2011-07-11, 16:05:34
Grob, weil gerade nicht viel Zeit:

Du fügst unter deinen Textboxen einen Container ein

<div id="textbox-table">
</div>

Jedes Mal, wenn du nun deine Werte ins Array packst, kannst du per JS sowas machen, dein Array heißt hier einfach dataArray:

var container = document.getElementById("textbox-table");
/* alte Tabelle löschen */
while( container.hasChildNodes() ) {
container.removeChild(container.lastChild);
}
/* neue Tabelle anlegen */
var table = document.createElement("table");
for(var i = 0; i < dataArray.length; ++i) {
var row = table.insertRow();
var cell1 = document.createElement("td");
cell1.createTextNode("Blubb Spalte 1");
row.appendChild(cell1);
/* ... usw. ... */
}

container.appendChild(table);

Das wäre die quick-and-dirty Variante, mit Wrappern wie jQuery kann man das in weniger Schreibaufwand und eleganter lösen.

(del)
2011-07-11, 17:12:45
Danke für die flotte Antwort!

Habe es mit kleinen Änderungen nun für meine Zwecke passend hinbekommen.