• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Tabelle dynamisch erstellen

I

icolor

New member
Hallo,

ich muss für einen Kunden eine Tabelle dynamisch erstellen und ein Freund sagte mir, das geht nur mit JavaScript. Jetzt bin ich hier allerdings völliger Neuling.

Folgendes:
1.) Die Tabellen-Zeilen müssen der der Anzahl des gewählten Monats entsprechen.
2.) Je Zeile müssen 7 Zeilen vorhanden sein, die ich mit Daten aus einer SQL Abfrage füllen möchte (c#)

Kann mir hier von Euch jemand ein wenig helfen?
Danke
 
Ehrlich gesagt hapert es es am meisten dabei, das ich die Anzahl der Spalten und Zeilen anhand der aus einer MS SQL gelesenen Werte füllen und erzeugen muss.
Es können also mal 10 und mal 50 Zeilen sein, ich muss dynamisch füllen und die Inhalte müssen sich später ändern und auch wieder speichern lassen.

Bisschen viel für den Anfang

- - - Aktualisiert - - -

Im Moment mache ich:

HTML: 
function aktion() {
                /* Beispieldaten */
                //var datum = new Date();
                //datum = datum.getDay() + " " + datum.toDateString();

                var tage = new Array(8);

                for (tg = 0; tg < 31; tg++) {
                    tage[tg] = new Array(tg + 1, "1", "07:00", "16:00", "01:00", "08:00", "08:00", "00:00");
                }

                werte = werte.concat(new Array(tage));

                /* Falls das Werte-Array irgendwann mal leer sein sollte, muß die ausgewählte ID gelöscht werden */
                document.getElementById('auswahl').value = "";
                /* Anhand der Sichtbarkeit der Tabelle wähle ich hier, ob die Tabelle ein- oder ausgeblendet werden soll. */
                if (document.getElementById("tabelle").style.visibility == "visible") {
                    /* Die Tabelle wird ausgeblendet. */
                    document.getElementById("tabelle").style.visibility = "hidden";
                    /* Solange noch ein Unterelement des Tabellenkörpers vorhanden ist, wird dieses gelöscht. */
                    while (document.getElementById('tabellenkoerper').childNodes.length > 0) {
                        document.getElementById('tabellenkoerper').removeChild(document.getElementById("tabellenkoerper").firstChild);
                    }
                } else {
                    /* Tabelle befüllen */
                    /* Für jedes Element aus dem Array werte wird eine Zeile generiert. */
                    for (y = 0; y < werte.length; y++) {
                        row = document.createElement("tr");
                        /** 
                         * Der erste Wert des jeweiligen Unterarrays des werte-Arrays wird als ID 
                         * verwendet und ist für den Benutzer nicht sichtbar. 
                         */
                        row.id = "zeile_" + werte[y][0];
                        document.getElementById("tabellenkoerper").appendChild(row);
                        /* Hier werden jetzt die Tabellenfelder erzeugt. */
                        for (x = 1; x < werte[y].length; x++) {
                            feld = document.createElement("td");
                            feld.id = "feld_" + x + "_" + y;
                            feld.onclick = marker;
                            feld.rowid = "zeile_" + werte[y][0];
                            document.getElementById("zeile_" + werte[y][0]).appendChild(feld);
                            /** 
                             * Die restlichen Werte des jeweiligen Unterarrays des werte-Arrays werden 
                             * in die neu erzeugten Tabellenfelder geschrieben 
                             */
                            txt = document.createTextNode(werte[y][x]);
                            document.getElementById("feld_" + x + "_" + y).appendChild(txt);
                        }
                    }
                    document.getElementById("tabelle").style.visibility = "visible";

Allerdings stimmt da anscheinend etwas im Array nicht. Für den Tabellenaufbau sollte es wie
HTML: 
                var werte = new Array(
                    new Array(5, "Schmidt", "Hans"),
                    new Array(8, "Müller", "Otto"),
                    new Array(7, "Meier", "Karl"),
                    new Array(2, "Schulz", "Gustav")
                );

sein. Sieht auch optisch so aus, aber mir wird alles in eine Zeile geschrieben.
 
Zuletzt bearbeitet von einem Moderator:
Ich habe jetzt eine Tabelle, die soweit steht und erst mal leer anzeigt.

Über den Code:
HTML: 
/* Hier werden jetzt die Tabellenfelder erzeugt. */
                        for (x = 1; x < werte[y].length; x++) {
                            feld = document.createElement("td");
                            feld.id = "feld_" + x + "_" + y;
                            //feld.onclick = marker;
                            feld.rowid = "zeile_" + werte[y][0];
                            document.getElementById("zeile_" + werte[y][0]).appendChild(feld);
                            /** 
                             * Die restlichen Werte des jeweiligen Unterarrays des werte-Arrays werden 
                             * in die neu erzeugten Tabellenfelder geschrieben 
                             */
                            txt = document.createTextNode(werte[y][x]);
                            document.getElementById("feld_" + x + "_" + y).appendChild(txt);
                        }

baue ich mir ja die Tabellenfelder auf. Sieht ja auch gut aus, aber damit ich damit in C# etwas anfangen kann, muss ich dort etwas wie

<asp:Label ID="Projekt" runat="server" Text='<%#Eval("Projekt") %>' />

verbasteln. Hier brauch ich jetzt wirklich noch einmal Hilfe.
 
Zuletzt bearbeitet von einem Moderator:
Wenn du Code postest, nutze bitte die CODE-Tags.

icolor schrieb:
...ich muss dynamisch füllen und die Inhalte müssen sich später ändern und auch wieder speichern lassen.
Zum Vergrößern anklicken....
Du möchtest also die SQL-Daten mit dieser Tabelle editieren können?

Wie holst du denn die Werte aus der SQL-Datenbank? Das ist aus deinem Code nicht ersichtlich.
Auch frage ich mich warum das generieren der Tabelle nur mit Javascript funktionieren soll. Erkläre doch mal genau was du anstellen möchtest...
 
Ein paar kleine Bemerkungen zum Code:
1. du hast da viele unnötige (und wahrscheinlich auch ungewollte) globale Variablen...
2. den Array-Konstruktor sollte man besser nicht verwenden - v.A. nicht, wenn man den JS-Code durch ein serverseitige Skript erstellen will. Verwende die Literalschreibweise.
3. du musst nicht jedem Element eine ID geben - v.A. dein row und feld (deine Namenskonvention ist auch nicht wirklich konsistent...) brauchen das nicht und die ganzen document.getElementById() machen das nur langsamer.

Code: 
var tbody = document.getElementById("tabellenkoerper");
for (var y = 0; y < werte.length; y += 1){
	var row = document.createElement("tr");
	for (var x = 1; x < werte[y].length; x += 1){
		var cell = document.createElement("td");
		cell.onclick = marker;
		var txt = document.createTextNode(werte[y][x]);
		cell.appendChild(txt);
		row.appendChild(cell);
	}
	tbody.appendChild(row);
}
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben