Pittinis Workshop für mich

[Pittini]

@Dominik-F sagte in Pittinis Workshop für mich:

Ich hab mir tausendmal den Aufbau einer Tabelle etc durchgelesen und mir war alles auch klar, nur nicht wie ich das umsetzen kann^^

Ich nehme an Du läßt Dir das Ergebnis jeweils in Vis anzeigen. Mach ich auch. Aaaber, wenn das Ergebnis offensichtlich nicht passt, machts Sinn sich den generierten HTML Code genau anzusehen und mit dem Wissen über HTML Tabellen abzugleichen. So findet man Fehler deutlich schneller als mit try&error. Und wenn man siehst wo der Fehler ist, ist es nimmer weit bis zu dessen Behebung.

Hier nun meine Lösung:

Verdammt nah dran! Ein Fehler is noch drin und zwar

 TestTable +=`<tr></tr>`;

Du beginnst damit ne neue Zeile, schreibst absolut nix rein und beendest die Zeile wieder. Dasses trotzdem funktioniert liegt daran, dasses ab der 2ten Zeile zwar um ein Tag "verschoben" ist aber trotzdem ein auf und zu Tag für jede Zeile existiert.

Was mir nicht gefällt auch wenns funktioniert ist jetzt Deine Mischung von Uhulas Schreibweise mit der normalen Stringschreibweise. Solange etwas in einer Zeile steht, nimm bitte " statt `. Grundsätzlich kann man Uhulas Variante natürlich hernehmen um ne Strukur besser visualisieren zu können, allerdings erhöht es massiv die Zeilenzahl des Codes und kann dazu führen dass eine Funktion nimmer auf eine Bildschirmseite passt was das lesen erschwert. Bei unserem Miniding kein Thema, aber so Skripte kriegen schnell mal paar hundert Zeilen und dann macht das, zumindest für mich, schon nen Lesbarkeitsunterschied. Letztendlich bleibts aber natürlich Deine Entscheidung.

createState('javascript.0.Test.TestTable', { type: 'string' });

function CreateTestTable() { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    TestTable += "<tr><th>Überschrift1</th><th>Überschrift2</th><th>Überschrift3</th></tr>"; //Tabellenzeile mit dem Header
    for (let x = 1; x < 6; x++) {
        TestTable += "<tr>";
        for (let y = 1; y < 4; y++) {
            TestTable += "<td>Zeile " + x + " Spalte " + y + "</td>"
        };
        TestTable += "</tr>"; 
    };

    TestTable += "</table>"; //Tabellenende

    setState('javascript.0.Test.TestTable', TestTable);
}

CreateTestTable(); //Skriptstart

So wäre das dann korrekt, Du siehst, fast das selbe wie bei Dir, nur die Zeile 8 ist "halbiert" und die weggenommene "Hälfte" steht in Zeile 12. Also die Zeile wird begonnen, dann kommt die Schleife welche die Spalten baut und dann wird die Zeile abgeschlossen.

Soweit so gut, jetzt weiste schon mal wie ne Tabelle prinzipiell in JS erstellt wird. Unser Beispiel is aber noch recht statisch, jetzt bringen wir mal ne erste Dynamik rein, indem wir die Zeilen- und Spaltenanzahl nimmer fest vorgeben sondern als Parameter der Funktion übergeben. Hier kommen nun die bisher leeren runden Klammern der Funktion ins Spiel. Das sieht dann in der Funktionsdeklaration so aus:

function machWas( param1, param2 ) {
    Anweisung;
    Anweisung; 
       …
    Anweisung;
}

Wie Du die Parameter nennst ist Deine Sache, was hier als "param1" bzw. "param2" definiert wird, steht dann als Variablenname auch innerhalb der Funktion zur Verfügung. Für unser Tabellenbeispiel wollen wir die mal AnzZeilen und AnzSpalten nennen. Werden wie hier zwei Parameter definiert, müssen beim Aufruf der Funktion auch zwei Parameter übergeben werden. Das würde in unserem Beispiel z.B. dann so aussehen:

CreateTestTable(7,4); //Skriptstart

Mit dieser Anweisung sollte unsere Tabelle jetzt 7 Zeilen mit 4 Spalten bekommen, bau unsere Funktion nun so um dass das auch passiert. Dazu sind nur insgesamt 3 kleine Änderungen nötig, einmal in der Funktionsdeklaration, sowie in den beiden Schleifen. Versuchs mal.

[Dominik F.]

@Pittini

Ja, ich lasse mir das Ergebnis immer in Vis anzeigen um die Auswirkungen direkt sehen zu können. Ich werde die Stringschreibweise ab sofort nur noch nutzen, du hast recht und ich denke bevor ich sowas anfange sollte ich erstmal alles andere wissen Dann kann man sich um sowas mal irgendwann kümmern.

So, das habe ich ausnahmsweise mal sofort hinbekommen

createState('javascript.0.Test.TestTable', { type: 'string' });
 
function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    TestTable += "<tr><th>Überschrift1</th><th>Überschrift2</th><th>Überschrift3</th></tr>"; //Tabellenzeile mit dem Header
    for (let x = 1; x <= AnzZeilen; x++) {
        TestTable += "<tr>";
        for (let y = 1; y <= AnzSpalten; y++) {
            TestTable += "<td>Zeile " + x + " Spalte " + y + "</td>"
        };
        TestTable += "</tr>"; 
    };
 
    TestTable += "</table>"; //Tabellenende
 
    setState('javascript.0.Test.TestTable', TestTable);
}
 
CreateTestTable(7,4); //Skriptstart
 

[Dominik F.]

@Pittini

Ich hoffe ich nehm dir jetzt nichts vorweg aber ich wollte mein neues Wissen direkt nochmal anwenden und hab die Tabelle so verändert, dass die Überschriften zu der Anzahl der Spalten passt.
In Vis funktioniert das ganze so wie es soll, hoffe der Code passt auch.

createState('javascript.0.Test.TestTable', { type: 'string' });
 
function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    TestTable += "<tr>"; //Tabellenzeile mit dem Header
    for (let i = 1; i <= AnzSpalten; i++) {
    TestTable +="<th>Überschrift" + i + "</th>"
    };
    TestTable += "</tr>";
    
    for (let x = 1; x <= AnzZeilen; x++) {
        TestTable += "<tr>";
        for (let y = 1; y <= AnzSpalten; y++) {
            TestTable += "<td>Zeile " + x + " Spalte " + y + "</td>"
        };
        TestTable += "</tr>"; 
    };
 
    TestTable += "</table>"; //Tabellenende
 
    setState('javascript.0.Test.TestTable', TestTable);
}
 
CreateTestTable(7,4); //Skriptstart
 

[Pittini]

@Dominik-F sagte in Pittinis Workshop für mich:

Ich hoffe ich nehm dir jetzt nichts vorweg aber ich wollte mein neues Wissen direkt nochmal anwenden und hab die Tabelle so verändert, dass die Überschriften zu der Anzahl der Spalten passt.
In Vis funktioniert das ganze so wie es soll, hoffe der Code passt auch.

Hehe, genau das wär Deine nächste Aufgabe gewesen. Schaut soweit gut aus, (Warum hast Du i als nächste Schleifenvariable genommen, läge nicht y gemäß unserer bisheriger Nomenklatur näher?) wenngleich wir jetzt an nem Punkt sind wo viele Wege nach Rom führen.
Und da Du ja inzwischen Schleifen schon kennst (und nicht mehrere Schleifen machen solltest als wirklich nötig, wegen CPU Last, Ausführungszeit, zusätzliche Variablen etc. pp) machen wir das nicht mit ner zusätzlichen Schleife sondern mit was "neuem", ner If Abfrage. Und falls Du Dich jetzt fragst, ja und wo kann ich die If hier einsetzen, hier ein kleiner Tipp. Was ist der Unterschied zwischen der Headerzeile und den normalen Zeilen bezogen auf die Schleife?

[Dominik F.]

@Pittini

Ich habe i als variable genommen da ich diese variable einfach oft in scripten gesehen habe und w oder z als variable noch nicht so wirklich^^ Also hatte keinen Hintergrund.
Da ja y nur innerhalb der Schleife gilt (wenn ich das richtig verstanden habe) wäre es wirklich sinnvoller gewesen y zu nehmen dafür.

Auf den ersten Blick ist der Unterschied, dass der Header nur aus einer Zeile besteht und einer Anzahl Spalten. Der andere Unterschied ist das th worin der inhalt steht, bei den normalen Zeilen das td.
Ich setz mich dann mal an die If Abfrage

[Pittini]

@Dominik-F sagte in Pittinis Workshop für mich:

Ich habe i als variable genommen da ich diese variable einfach oft in scripten gesehen habe und w oder z als variable noch nicht so wirklich^^ Also hatte keinen Hintergrund.
Da ja y nur innerhalb der Schleife gilt (wenn ich das richtig verstanden habe) wäre es wirklich sinnvoller gewesen y zu nehmen dafür.

Ja, i sieht man auch oft, dann meist aber gefolgt von j als zweite Variable wenn benötigt. Also i.d.R. aufeinanderfolgende Buchstaben, da hat jeder seine Vorlieben, aber man sollte es halt kongruent machen.

Ja, y gilt nur innerhalb der Schleife, in unserem konkreten Fall hättest sogar x ein 2tes mal nehmen können weil ja die erste x Schleife schon durch war als die 2te begann.

Auf den ersten Blick ist der Unterschied, dass der Header nur aus einer Zeile besteht und einer Anzahl Spalten. Der andere Unterschied ist das th worin der inhalt steht, bei den normalen Zeilen das td.

Anders ausgedrückt heißt das, auch der Header ist nur ne Zeile! Und der Header hat genauso viel Spalten wie der Rest der Tabelle. Mit dieser Erkenntnis läßt sich der Header in unsere bisherige Struktur einfügen unter Verwendung einer If Abfrage.

[Dominik F.]

@Pittini

Im Moment ist mir noch nicht so ganz klar wie ich das ganze logisch aufbauen soll. Eine If Abfrage ist ja anders ausgedrückt eine Wenn/Dann Struktur.
Das Einzige was mir einfällt wäre: Wenn die Tabelle 4 Spalten hat, dann mach im Header 4 Spalten.

[Pittini]

@Dominik-F sagte in Pittinis Workshop für mich:

Das Einzige was mir einfällt wäre: Wenn die Tabelle 4 Spalten hat, dann mach im Header 4 Spalten.

Nein, dafür brauchts keine Abfrage, das macht ja schon die Schleife. Die Abfrage brauchst Du dafür: Wenn der Zeilenzähler x im ersten Durchlauf ist, schreib den Header, ansonsten schreib die normale Tabelle. Und dran denken, wenn der Header jetzt dazukommt erhöht sich die Zeilenzahl um eins.

[Dominik F.]

@Pittini

ahhh, okay, an diese Logik hatte ich nicht ansatzweise gedacht^^ Ich setzt mich dann jetzt mal dran.

[Dominik F.]

@Pittini

So, diesmal hat es ganz gut geklappt finde ich.

createState('javascript.0.Test.TestTable', { type: 'string' });
 
function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    
    for (let x = 0; x <= AnzZeilen; x++) {
        TestTable += "<tr>";
        for (let y = 1; y <= AnzSpalten; y++) {
            if(x<1) {TestTable +="<th>" + "Überschrift" + y + "</th>"}
            else    {TestTable +="<td>" + "Zeile " + x + " Spalte " + y + "</td>"}
        };
        TestTable += "</tr>"; 
    }; 
    TestTable += "</table>"; //Tabellenende
 
    setState('javascript.0.Test.TestTable', TestTable);
};
 
CreateTestTable(7,4); //Skriptstart

[Pittini]

@Dominik-F sagte in Pittinis Workshop für mich:

So, diesmal hat es ganz gut geklappt finde ich.

Das schaut doch schon ganz gut aus. Die einzige "Änderung" die vorschlagen würde, wär, nicht x<1 abzufragen sondern x==0, wir haben ja ganz klar definierte Zustände, die sollte man auch klar abfragen.
Und ich würde es rein optisch etwas anders aufbauen, spätestens wenn mehrere Anweisungen innerhalb der if sind wirds sonst unübersichtlich. Kleiner Tipp, im Editor die rechte Maustaste und "Dokument formattieren" spart viel Arbeit und machts gleich hübscher. Hier zum Vergleich meine Lösung:

createState('javascript.0.Test.TestTable', { type: 'string' });

function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    for (let x = 0; x <= AnzZeilen; x++) {
        TestTable += "<tr>";
        for (let y = 1; y <= AnzSpalten; y++) {
            if (x == 0) {
                TestTable += "<th>Überschrift" + y + "</th>";
            }
            else {
                TestTable += "<td>Zeile " + x + " Spalte " + y + "</td>";
            }
        };
        TestTable += "</tr>";
    };
    TestTable += "</table>"; //Tabellenende
    setState('javascript.0.Test.TestTable', TestTable);
}

CreateTestTable(7, 4); //Skriptstart

Nachdem wir jetzt die Tabelle schon dynamisch mit Zeilen und Spalten erstellen können, fehlt noch das wichtigste, die eigentlichen darzustellenden Daten da rein zu kriegen. An der Stelle kommen wir zum Punkt Arrays. Arbeite Dich dazu bitte erstmal durch die Basisinfos.
Dann erstellst Du drei Arrays unter den Namen "Stadt", "Land", "Fluss" und trägst jeweils 5 Einträge in jedes Array ein. Das ganze erstmal noch ohne jede Verbindung zu unserer Tabelle.

[Dominik F.]

@Pittini

Ist jetzt eher unwichtig, aber ich habe mich gefragt wie man die Funktion Testtable sowie die Variable Testtable am Besten benennen sollte? Ich denke, dass ich das Script am Ende als eine Art "Vorlage" nehmen kann um Tabellen zu erstellen und ich werde mir bestimmt oft die verschiedenen Schritte anschauen. Da wäre es vielleicht ganz gut ab dem jetzigen Zeitpunkt wo noch alles sehr "übersichtlich" ist es direkt richtig zu benennen.

createState('javascript.0.Test.TestTable', { type: 'string' });

var Stadt = ["Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
var Fluss = ["Rhein", "Ruhr", "Main", "Donau", "Elbe"];
var Land = ["Deutschland", "England", "Spanien", "Frankreich", "Italien"];


function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    for (let x = 0; x <= AnzZeilen; x++) {
        TestTable += "<tr>";
        for (let y = 1; y <= AnzSpalten; y++) {
            if (x == 0) {
                TestTable += "<th>Überschrift" + y + "</th>";
            }
            else {
                TestTable += "<td>Zeile " + x + " Spalte " + y + "</td>";
            }
        };
        TestTable += "</tr>";
    };
    TestTable += "</table>"; //Tabellenende
    setState('javascript.0.Test.TestTable', TestTable);
}

CreateTestTable(7, 4); //Skriptstart

[Pittini]

@Dominik-F sagte in Pittinis Workshop für mich:

Da wäre es vielleicht ganz gut ab dem jetzigen Zeitpunkt wo noch alles sehr "übersichtlich" ist es direkt richtig zu benennen.

Da gibts kein richtig oder falsch im eigentlichen Sinne. Da hat jeder so sein System, der eine deutsch, der andere englisch. Ich persönlich verwende gern die gleichen Bezeichnugen für Datenpunkte und die Variablen die dessen Werte speichern wegen Übersichtlichkeit. Eigentlich ist nicht wichtig wie Du es machst, nur dass Du es immer gleich machst, sonst verstehst nen halbes Jahr später Dein eigenes Skript nimmer. Würd sagen wir bleiben bei TestTable sagt ja genau das aus wasses ist.

Zu Deiner Lösung der Arrays.
Soweit richtig, nen Ohrenschnalzer gibts aber dafür dass Du wieder mit var daherkommst, wir hatten uns auf let geeinigt .
An dieser Stelle kommt aber ohnehin ne Besonderheit von Arrays ins Spiel, diese deklariert man meist mit const. Const steht für Konstante, also Werte die sich im Skript nicht mehr ändern (naja eigentlich ist es etwas komplexer, siehe hier, aber für unsere Anwendung gehen wir mal von Konstanten Werten aus), z.B. siehe die ganzen Einstellungen in meinen Skripten. Und warum const bei Arrays, wir wollen doch die Werte ändern, wirst Du Dich jetzt fragen. Ich sags mal (etwas unpräzise) so, Wenn Du den Inhalt eines Arrays änderst, änderst Du nicht das Array an sich. Genau, siehe wieder obigen Link.

Die nächste Aufgabe ist nun, die Werte der Arrays in die Tabelle zu kriegen. Dazu brauchen wir jetzt eine Tabelle mit 5 Zeilen (+Header) und drei Spalten. Versuchs mal, wenn nicht klappt nicht verzagen jetzt wirds langsam etwas komplexer, dann lösen wirs heut abend auf.

[Dominik F.]

@Pittini

Haha ja das let und var Dingen Ich glaube ich hab mich einfach zu sehr an var vorher gewöhnt bei meinem gefährlichem Halbwissen^^
Ich habe schon grundsätzlich eine Idee wie ich das ganze umsetzen kann. Habe auch schon angefangen und bin da denke ich schon auf einem ganz gutem Weg. Ich frage mich nun, ob es klug ist den Header noch so generieren zu lassen. Der erste Wert des Arrays beginnt ja mit der 0 und damit kommen bei mir die ersten "Probleme". Ich musste für mich da jetzt erst mal etwas "schummeln" damit es passt. Auch frage ich mich ob ich noch die verschachtelnte for Schleife anwenden sollte.
Ich poste dir mal meinen ersten Versuch und dann erkennst du denke ich mein Problem. Ich habe nun einen leeren Wert bei den Arrays eingeführt damit es erst mal passt Du wirst jetzt wahrscheinlich gerade mit dem Kopf auf die Tastatur fallen wenn du das siehst
Da ich glaube ich schon einigermaßen nah an der Lösung bin würde ich noch dabei bleiben das ich es versuche selber zu lösen und würde erstmal nur die Frage mit dem Header geklärt haben wollen und wissen wollen, ob ich grundsätzlich den "richtigen" Weg eingeschlagen habe. Das würde mir schon reichen um weiter zu tüfteln.

createState('javascript.0.Test.TestTable', { type: 'string' });

const Stadt = ["","Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
const Fluss = ["","Rhein", "Ruhr", "Main", "Donau", "Elbe"];
const Land = ["","Deutschland", "England", "Spanien", "Frankreich", "Italien"];
const Header = ["Stadt", "Land", "Fluss"];

function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    for (let x = 0; x < AnzZeilen; x++) {
        TestTable += "<tr>";
        for (let y = 0; y < AnzSpalten; y++) {
            if (x == 0) {
                TestTable += "<th>" + Header[y] + "</th>";
            }
            else {
                TestTable += "<tr><td>" + Stadt[x] + "</td>" ;
                TestTable += "<td>" + Land[x] + "</td>" ;
                TestTable += "<td>" + Fluss[x] + "</td></tr>";
            }
        };
        TestTable += "</tr>";
    };
    TestTable += "</table>"; //Tabellenende
    setState('javascript.0.Test.TestTable', TestTable);
}

CreateTestTable(6, 3); //Skriptstart

[Pittini]

@Dominik-F sagte in Pittinis Workshop für mich:

Der erste Wert des Arrays beginnt ja mit der 0 und damit kommen bei mir die ersten "Probleme". Ich musste für mich da jetzt erst mal etwas "schummeln" damit es passt. Auch frage ich mich ob ich noch die verschachtelnte for Schleife anwenden sollte.

Die Leerstrings gehen natürlich gar nicht, aber Du hast zumindest das Problem erkannt und bist ja auch nah dran an der Lösung, hier fehlts wieder nur an der Umsetzung. Warum sparst Dir das Headerarray nicht und schreibst anstelle der Leerstrings jeweils die Überschrift rein, was dann ja passend wieder an pos 0 ist? Und um die verschachtelte Schleife wirst nicht rumkommen, wie hattest Dir das denn gedacht?

[Dominik F.]

@Pittini

Ja die Überschriften in die Arrays rein zu schreiben wäre zu einfach gewesen Ich hatte den Array mit den Überschriften erstellt da es ja irgendwann auch das Ziel sein wird, eine Variable zu erstellen, mit dem man die Überschriften erstellen kann bzw. ich dachte das das eines der nächsten Sachen sein wird und hatte eine Idee wie das umzusetzen ist^^ Es kann sein, dass ich in den nächsten Tagen nicht immer täglich die Lösung deiner Aufgaben haben werde. Hab zwar täglich Zeit dafür nur nicht 5 std. pro Tag wie in den letzten Tagen. Ich bleibe aber dran.

[Dominik F.]

@Pittini

Habe jetzt eine Lösung, aber das ist nicht der Weg den ich eingehen sollte glaube ich
Ich werde noch einen 2ten Lösungsweg probieren

Hier der erste:

createState('javascript.0.Test.TestTable', { type: 'string' });

var Stadt = ["Stadt", "Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
var Fluss = ["Fluss", "Rhein", "Ruhr", "Main", "Donau", "Elbe"];
var Land = ["Land", "Deutschland", "England", "Spanien", "Frankreich", "Italien"];


function CreateTestTable(AnzZeilen, AnzSpalten) { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    for (let x = 0; x <= AnzZeilen; x++) {
        TestTable += "<tr>";
        for (let y = 1; y <= AnzSpalten; y++) {
            if (x == 0) {
                TestTable += "<th>" + Stadt[x] + "</th>" + "<th>" + Land[x] + "</th>" + "<th>" + Fluss[x] + "</th>";
            }
            else {
                TestTable += "<td> " + Stadt[x] + "</td>" + "<td> " + Land[x] + "</td>" + "<td> " + Fluss[x] + "</td>";
            }
        };
        TestTable += "</tr>";
    };
    TestTable += "</table>"; //Tabellenende
    setState('javascript.0.Test.TestTable', TestTable);
}

CreateTestTable(5, 1); //Skriptstart

[Dominik F.]

@Pittini
Okay, ich stehe gerade auf dem Schlauch. Ich weiß zwar wie ich in den Arrays weiterzähle, jedoch müsste ich ja irgendwie die Variablen weiterzählen damit ich die Spaltenanzahl weiter wählen kann. Wie ich das anstelle ist mir irgendwie nicht klar.

[Pittini]

@Dominik-F sagte in Pittinis Workshop für mich:

Okay, ich stehe gerade auf dem Schlauch. Ich weiß zwar wie ich in den Arrays weiterzähle, jedoch müsste ich ja irgendwie die Variablen weiterzählen damit ich die Spaltenanzahl weiter wählen kann. Wie ich das anstelle ist mir irgendwie nicht klar.

Ich weis auch gar nicht was Du anders machen willst, Deine erste Lösung ist ok, wollte Dich nur nicht ausbremsen wenn Du ne andere Idee hattest. Da die Spalten jetzt ja vorgegeben sind durch Stadt, Land, Fluss braucht man das aber natürlich der Funktion nimmer übergeben und läßt den Parameter weg in der Funktion. Und wo wir schon dabei sind ersetzen wir jetzt auch noch die Zeilenzahl. Hier die Infos dazu die Du brauchst https://www.w3schools.com/jsref/jsref_length_array.asp

[Dominik F.]

@Pittini

Achsooooooo So, habe nun die zweite Schleife entfernt weil mir die irgendwie überflüssig erschien. Hier meine neue Lösung:

createState('javascript.0.Test.TestTable', { type: 'string' });

const Stadt = ["Stadt", "Hamburg", "München", "Berlin", "Bochum", "Dortmund"];
const Fluss = ["Fluss", "Rhein", "Ruhr", "Main", "Donau", "Elbe"];
const Land = ["Land", "Deutschland", "England", "Spanien", "Frankreich", "Italien"];


function CreateTestTable() { //  Erzeugt tabellarische Übersicht als HTML Tabelle   
    let TestTable = "";
    TestTable = "<table border='1'>"; //Tabellenanfang
    for (let x = 0; x < Stadt.length; x++) {
        TestTable += "<tr>";
        if (x == 0) {
            TestTable += "<th>" + Stadt[x] + "</th>" + "<th>" + Land[x] + "</th>" + "<th>" + Fluss[x] + "</th>";
        }
        else {
            TestTable += "<td> " + Stadt[x] + "</td>" + "<td> " + Land[x] + "</td>" + "<td> " + Fluss[x] + "</td>";
        }
        TestTable += "</tr>";
    };
    TestTable += "</table>"; //Tabellenende
    setState('javascript.0.Test.TestTable', TestTable);
}

CreateTestTable(); //Skriptstart