Tabellengenerator

So funktioniert das Script

Das Script hat zwei Kernaufgaben: Es baut aus zwei Zahlen ein Raster von Eingabefeldern, und es setzt aus den Inhalten dieser Felder den HTML-Code einer Tabelle zusammen. Alles Übrige hängt daran — die Vorschau ist derselbe Code, nur in die Seite eingesetzt, und der Knopf „Inhalte leeren" räumt die Felder aus und lässt neu zusammensetzen. Die Verbindung zwischen beiden Aufgaben ist die Liste felder: Sie merkt sich zu jeder Zeile und Spalte das zugehörige Eingabefeld.

for (let i = 0; i < zeilen; i++) {
  const zeile = document.createElement("tr");
  felder[i] = [];

  for (let k = 0; k < spalten; k++) {
    const zelle = document.createElement("td");
    const feld = document.createElement("input");

So entsteht das Raster. Zwei ineinander geschachtelte Schleifen laufen über alle Zeilen und darin über alle Spalten — das ist das übliche Muster, wenn man etwas Zweidimensionales durchgehen will. document.createElement() erzeugt jeweils ein neues, noch nicht sichtbares Element; erst appendChild() hängt es an die richtige Stelle. felder[i] = [] legt für jede Zeile eine leere Liste an, in die anschließend die Eingabefelder dieser Zeile wandern. Am Ende ist felder eine Liste von Listen, und felder[2][0] ist das Feld in der dritten Zeile, erste Spalte — gezählt wird in JavaScript ab 0.

if (alt[i] && alt[i][k]) {
  feld.value = alt[i][k].value;
}

Bevor das Raster neu gebaut wird, merkt sich das Script die alten Felder in alt. Gibt es an derselben Stelle bereits ein Feld, wird sein Text in das neue übernommen — deshalb geht beim Vergrößern der Tabelle nichts verloren. Die Prüfung mit && ist nötig, weil die alte Tabelle kleiner sein kann: alt[i] wäre dann undefined, und der Zugriff darauf würde das Script mit einem Fehler abbrechen. JavaScript wertet && von links nach rechts aus und hört auf, sobald ein Teil unwahr ist — der zweite Zugriff findet also gar nicht erst statt.

feld.addEventListener("input", aktualisieren);

Jedes einzelne Eingabefeld bekommt beim Anlegen seinen eigenen Lauscher. Das Ereignis input tritt bei jeder Änderung des Inhalts ein, also auch beim Einfügen mit der Maus — anders als change, das erst zuschlägt, wenn das Feld den Fokus verliert. Deshalb wachsen Vorschau und Code beim Tippen mit.

function maskieren(text) {
  return text.replace(/&/g, "&")
             .replace(/</g, "&lt;")
             .replace(/>/g, "&gt;");
}

Diese kleine Funktion ist wichtiger, als sie aussieht. Tippt jemand in eine Zelle den Text 5 < 8, dann darf das spitze Klammerzeichen nicht als Anfang eines HTML-Tags im erzeugten Code landen — die Tabelle wäre kaputt. maskieren() ersetzt deshalb die drei Zeichen, die in HTML eine Sonderbedeutung haben, durch ihre Umschreibungen. Das /g hinter dem Suchmuster steht für „global" und sorgt dafür, dass nicht nur das erste Vorkommen ersetzt wird. Das kaufmännische Und muss dabei zuerst ersetzt werden, sonst würde der Ersatz der anderen beiden gleich wieder mitmaskiert.

const html = htmlErzeugen();
codefeld.value = html;
vorschau.innerHTML = html;

Vorschau und Codefeld werden aus derselben Zeichenkette gefüllt. Das Textfeld bekommt sie über value als reinen Text zu sehen, die Vorschau über innerHTML als echtes HTML — was ihr oben seht, ist also wirklich das, was unten im Code steht. Dass innerHTML hier gefahrlos ist, liegt allein an maskieren(): Ohne diese Absicherung könnte eingetippter Text eigene Tags in die Seite schmuggeln.

Zum Anpassen: Das Aussehen der erzeugten Tabelle steckt in den beiden style-Angaben in htmlErzeugen() — dort ändert ihr Rahmenfarbe, Innenabstand oder die Ausrichtung. Wer die erste Zeile als Kopfzeile möchte, ersetzt für i === 0 das td durch th. Und die Grenzen für die Größe des Rasters stehen in MAX_ZEILEN und MAX_SPALTEN ganz oben.