201115Sep

Fox.js: Tabellen per ASCII-Definitionen erzeugen

Tabellen in HTML-Dokumenten lassen sich mittlerweile durch komfortable Werkzeuge erstellen und anpassen. Gerade in JavaScript gibt es viele Möglichkeiten, Tabellen zu erstellen.
Eine etwas andere Art zu diesem Zweck bietet Fox.js — eine kleine Bibliothek, die es ermöglicht, Tabellen anhand von ASCII-Definitionen dynamisch zu erzeugen.

Fox.js - Use ASCII-art to create grid layouts in JavaScript

Die wichtigsten Zeichen, die bei der Erstellung von Tabellen zum Einsatz kommen, sind Leerzeichen und die Symbole "+" und "-". Eine Tabelle kann mit Fox.js also in etwa so erzeugt werden:

  • document.body.appendChild(
  • Fox.makeTable([
  • "+---+---+---+",
  • "|A  |B  |C  |",
  • "|   +---+---+",
  • "|   |D  |E  |",
  • "|   +---+   |",
  • "|   |F  |   |",
  • "+---+---+---+",
  • ])
  • );

Es handelt sich bei einem Fox-Template also um ein Array, das von dem Fox-Parser ausgewertet wird. Somit können also auch Tabellen mit Spanning ("colspan" und "rowspan") erzeugt werden. Etliche Beispiele dazu finden sich auf dieser Seite.