Tabelle mit JavaScript
In einem Artikel über tschechische Namen soll eine Tabelle mit etwa 140 Zeilen publiziert werden. Das ist in WordPress prinzipiell kein Problem, doch wenn man die Tabelle auch eingefärbt und sortiert haben will, stößt man an die Grenzen von WordPress.
Änderungen an den Details der Tabelle kann ein nachträgliches Editieren jeder Zelle erforderlich machen.
Wenn man diese Tabelle händisch editiert, kann man die Daten nicht weiterverwenden, weil sie in WordPress gespeichert sind und man sie extrahieren müsste. Wenn die Daten in einer externen CSV-Datei gespeichert bleiben, können sie jederzeit in eine andere Anwendung, etwa Excel, importiert werden.
Dieser Artikel zeigt, wie man eine CSV-Datei mit JavaScript in eine HTML-Datei importiert und damit eine Tabelle aufbaut.
CSV-Daten
Die Daten für die Tabelle werden als einfacher Text erfasst. Die erste Zeile sind die Spaltennamen Tsch(Tschechisch), Dsch(Deutsch), Bsp(Beispiel), Fkt(Funktion); Url (Link). Das Feldtrennzeichen ist ein Tabulator (In der folgenden Tabelle ist das das Zeichen □. In einem Text-Editor sieht man statt diesem Zeichen einen Abstand.).
So schauen ein paar Zeilen dieser Tabelle, gespeichert in http://iam.at/leebsicc/@db/tschechische namen.txt aus:
Tsch□Dsch□Bsp□Fkt□Url Tichý□Still□Kurt Tichy□Eissalon Tichy, Favoriten□https://de.wikipedia.org/wiki/Kurt_Tichy Veselý□Lustig□Tanja Wehsely□Geschäftsführerin der Volkshilfe Wien□https://de.wikipedia.org/wiki/Tanja_Wehsely Zeman□Edelmann□Walter Zeman□ehem. Fußball-Legende (Rapid)□https://de.wikipedia.org/wiki/Walter_Zeman Čáp□Storch□Josef Cap□Politiker (SPÖ)□https://de.wikipedia.org/wiki/Josef_Cap ...
Diese Tabelle ist auch gleichzeitig die Datenbank, die einerseits in WordPress publiziert werden soll, aber gleichzeitig in andere Programme wie Excel oder Access importiert werden kann. Bei Fehlern oder Ergänzungen wird immer diese Tabelle editiert, die Änderungen wirken sich automatisch in WordPress aus.
JavaScript/jQuery-Programm
Das fertige Programm kann hier aufgerufen werden: http://iam.at/leebsicc/@db/tschechische namen.htm, der Anfang der Tabelle zeigt das folgende Bild:
- blau: Name im tschechischen Original
- rot: deutsche Übersetzung “klein”=Verkleinerungsform, ~ ungefähr, manche Namen haben keine Bedeutung,
Link zu weiteren Angaben zur Person. - Ein Klick auf die Überschriften sortiert nach dieser Spalte.
Hilfsmittel
jQuery
Zur vereinfachten Ansprache von Seitenelementen wird die jQuery-Bibliothek verwenden. Im folgenden Beispiel wird das HTML-Objekt “demo” auf den Wert “abc” eingestellt. jQuery bietet dafür eine verkürzte Schreibweise an, Alle diese jQuery-Ausdrücke beginnen mit $.
HTML
<div id="demo"></div>
JavaScript
document.getElementById("demo").innerText = "abc"
jQuery
$("#demo).html("abc")
Aktivierung
Damit jQuery in einem Programm verwendet werden kann, wird folgende Zeile in dern Header der HTML-Datei eingefügt:
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
Bootstrap
Bootstrap ist eine Bibliothek von Twitter, mit der eine HTML-Seite mit wenigen Handgriffen in eine responsive Seite verwandelt werden kann, eine Seite, die sich automatisch an die Bildschirmgröße anpasst, also auch am Handy den zur Verfügung stehenden Platz automatisch ausfüllt und man den Bildschirm nicht händisch vergrößern muss.
Konzept
<div class="container"> <div class="row"> <div class="col"> <table class="table" id="content"></table> </div> </div> </div>
Der gesamte Inhalt der Seite ist in einem container enthalten, die Seite wird in Abschnitte row und diese wieder in Abschnitte col unterteilt. In unserem einfachen Beispiel ist nur eine Tabelle content enthalten. Damit diese Tabelle ebenfalls die Eigenschaft responsive hat, muss sie die Klasse table enthalten.
Aktivierung
Damit Bootstrap in einem Programm verwendet werden kann, werden folgende Zeilen in dern Header der HTML-Datei eingefügt:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
Google Fonts
Ich verwende gerne die Symbol-Bibliothek (Tab “Icons”), weil die Symbole kostenlos verwendet werden können. In diesem Programm soll das Symbol “Externer Link” verwendet werden.
Die Verwendung der Google-Fonts wurde von einer zweifelhaften Anwaltskanzlei mit einer zu zahlenden Strafgebühr belegt, weil die bedauernswerte Klientin deshalb schlaflose Nächte haben soll. (Link, Link) Mittlerweile ermittelt die WKStA. (Link)
Die Anwendung ist denkbar einfach. Jedes Symbol hat einen sprechenden Namen und wird als ein span-Konstrukt in den Text eingefügt:
HTML
<span class='material-symbols-outlined'>open_in_new</span>
Aktivierung
Damit die Google-Fonts und Symbols in einem Programm verwendet werden können, wird folgende Zeile in dern Header der HTML-Datei eingefügt:
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0" />
Ohne diese Einfügung im Kopf der Seite würde die span-Zeile den Text open_in_new zeigen. Mit der zusätzlichen Kopfzeile sieht man aber 
.
Einlesen der Daten
Das Programm heißt http://iam.at/leebsicc/@db/tschechische%20namen.htm, die Daten befinden sich in der Datei http://iam.at/leebsicc/@db/tschechische%20namen.txt.
Um die Daten in eine Variable einzulesen, verwendet man die jQuery-Funktion get():
HTML
$.get('http://iam.at/leebsicc/@db/tschechische%20namen.txt', function (text) {
// hier kann text weiterbearbeitet werden
}
CSV in JSON umwandeln
Damit die Daten nicht als endloser Text, sondern als praktisch bearbeitbares JSON-Array weiterverwendet werden können, werden sie in einer kurzen Funktion Text2JSON() in einen String verwandelt, der dann mit der Funktion JSON.parse() in ein JavaScript-Array verwandelt werden kann.
CSV-Daten, TAB-Separator
h1□h2□h3 abc□def□ghi jkl□mno□pqr
JSON-Text
[ { "h1": "abc", "h2": "def", "h3": "ghi"},
{ "h1": "jkl", "h2": "mno", "h3": "pqr"} ]
JavaScript-Objekt
[ { h1: "abc", h2: "def", h3: "ghi"},
{ h1: "jkl", h2: "mno", h3: "pqr"} ]
Die Umwandlung der CSV-Daten in einen JSON-Text erfolgt durch die Funktion Text2JSON():
function Text2JSON (text) {
var Lines = text.split("\r\n")
var arr_Names = Lines[0].split("\t")
var s = ""
for (var l=1; l<Lines.length; l++) {
var Line = Lines[l].split("\t")
s += "{"
+ "\"" + arr_Names[0]+"\": \""+Line[0]+"\","
+ "\"" + arr_Names[1]+"\": \""+Line[1]+"\","
+ "\"" + arr_Names[2]+"\": \""+Line[2]+"\","
+ "\"" + arr_Names[3]+"\": \""+Line[3]+"\","
+ "\"" + arr_Names[4]+"\": \""+Line[4]+"\""
+ "}" + (l==Lines.length-1?"":",")
}
return "[" + s + "]"
}
Die Umwandlung in ein JavaScript-Objekt erfolgt durch die Funktion JSON.parse():
text = Text2JSON (text)
var arr_Tsch = JSON.parse(text)Objekt in HTML umwandeln
Nach dem Einlesen der Daten muss das Objekt zeilenweise in HTML-Tabellenzeilen umgewandelt werden. Die dazu erforderliche Funktion Draw() kann im vollständigen Programm untersucht werden. Es geht dabei um Kleinigkeiten wie das Formatieren einer Tabellenzeile wie im folgenden Beispiel:
CSV-Daten, TAB-Separator
h1□h2□h3 abc□def□ghi jkl□mno□pqr
HTML-Text
<tr><th>h1</th><th>h2</th><th>h3</th></tr> <tr><td>abc</td><td>def</td><td>ghi</td></tr> <tr><td>jkl</td><td>mno</td><td>pqr</td></tr>
Bildschirmdarstellung
| h1 | h2 | h3 |
| abc | def | ghi |
| jkl | mno | pqr |
Programm “Tschechische Namen.htm”
Die Tags html, head, und body fehlen mit Rücksicht auf die spätere Einbindung in WordPress. Dieser Code kann über http://iam.at/leebsicc/@db/tschechische namen.htm als selbständiges Programm aufgerufen werden.
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=2.0, user-scalable=yes”>
<link href=“https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css” rel=“stylesheet” integrity=“sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3” crossorigin=“anonymous”>
<script src=“https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js” integrity=“sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p” crossorigin=“anonymous”></script>
<script src=“https://code.jquery.com/jquery-1.12.4.js”></script>
<link rel=“stylesheet” href=“https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0” />
<div class=“container”>
<div class=“row”>
<div class=“col”>
<table class=“table” id=“content”></table>
</div>
</div>
</div>
<script>
const BASEURL = “http://iam.at/leebsicc/@DB/”
var arr_Tsch = []
var sort_col = “Tsch”
function Tagify(text, tag, background) {
return “<“+tag+” class='”+background+“”>” + text + “</”+tag+“>”
}
function TagifyID(text, tag, background, id) {
return “<“+tag+” class=’head “+background+“‘ id='”+id+“‘>” + text + “</”+tag+“>”
}
function Draw() {
const alphabet = “AaÁáBbCcČčDdĎďEeÉéĚěFfGgHhIiÍíJjKkLlMmNnŇňOoÓóPpQqRrŘřSŠsšTtŤťUuÚúŮůVvWwXxYyÝýZzŽž”
arr_Tsch.sort(function(a,b) {
switch (sort_col) {
case “Tsch”:
var index_a = alphabet.indexOf(a.Tsch[0])
var index_b = alphabet.indexOf(b.Tsch[0])
if (index_a === index_b) {
if (a.Tsch < b.Tsch) {
return –1;
} else if (a.Tsch > b.Tsch) {
return 1;
}
return 0;
} else {
return index_a – index_b;
}
case “Dsch”:
if (a.Dsch>b.Dsch) return 1
else if (a.Dsch<b.Dsch) return –1
else return 0
case “Bsp”:
var a1 = a.Bsp.split(” “)
a1 = a1[a1.length-1]
var b1 = b.Bsp.split(” “)
b1 = b1[b1.length-1]
if (a1>b1) return 1
else if (a1<b1) return –1
else return 0
}
})
$(“#content”).html(“”)
var keys = Object.keys(arr_Tsch[0])
var s = “<tr>”
//+ TagifyID(keys[0],”th”,”table-primary”,”Tsch”)
//+ TagifyID(keys[1],”th”,”table-danger”,”Dsch”)
+ TagifyID(“<img src='”+BASEURL+“tsch.jpg’ width=’30’>”,“th”,“table-primary”,“Tsch”)
+ TagifyID(“<img src='”+BASEURL+“dsch.jpg’ width=’30’>”,“th”,“table-danger”,“Dsch”)
+ TagifyID(“Beispiel”,“th”,“”,“Bsp”)
+ “</tr>\n”
for (var l=0; l<arr_Tsch.length; l++) {
var record = arr_Tsch[l]
var tsch = Tagify(“<strong>”+record.Tsch+“</strong>”,“td”,“table-primary”)
var dsch = Tagify(“<strong>”+record.Dsch+“</strong>”,“td”,“table-danger”)
var bsp = “”
if (record.Url == “”) {
bsp += “<span class=’material-symbols-outlined’>square</span>”
} else {
bsp += “<a href='”+record.Url+“‘ target=’_blank’><span class=’material-symbols-outlined’>open_in_new</span></a>”
}
bsp += “ ”
if (record.Bsp != “”) {
var arr_bsp = record.Bsp.split(” “)
arr_bsp[arr_bsp.length-1] = “<strong>” + arr_bsp[arr_bsp.length-1] + “</strong>”
for (var i=0; i<arr_bsp.length; i++) {
bsp += arr_bsp[i] + ” “
}
if (record.Fkt != “”) {
bsp += ” <span style=’font-size:10pt; color:blue’><i>” + record.Fkt +“</i></span>”
}
bsp = Tagify(bsp,“td”,“”)
}
s += “<tr>”
+ tsch + dsch + bsp
+ “</tr>\n”
}
$(“#content”).html(s)
}
function Text2JSON (text) {
var Lines = text.split(“\r\n”)
var arr_Names = Lines[0].split(“\t”)
var s = “”
for (var l=1; l<Lines.length; l++) {
var Line = Lines[l].split(“\t”)
s += “{“
+ “\”” + arr_Names[0]+“\”: \””+Line[0]+“\”,”
+ “\”” + arr_Names[1]+“\”: \””+Line[1]+“\”,”
+ “\”” + arr_Names[2]+“\”: \””+Line[2]+“\”,”
+ “\”” + arr_Names[3]+“\”: \””+Line[3]+“\”,”
+ “\”” + arr_Names[4]+“\”: \””+Line[4]+“\””
+ “}” + (l==Lines.length-1?“”:“,”)
}
return “[“ + s + “]”
}
$(document).on(“click”,“.head”,function(){
sort_col = this.id
Draw()
})
$.get(BASEURL+‘tschechische namen.txt’, function (text) {
text = text.replace(“\””,“‘”)
text = Text2JSON (text)
arr_Tsch = JSON.parse(text)
Draw()
});
</script>
Publikation in WordPress
Man kann in WordPress über den Block HTML den obigen Text einfügen:
Wie diese Einbettung ausschaut, kann man auf der WordPress-Seite “Wiener Tschechen – Namen” (am Ende des Dokuments kontrollieren.
Das hier kommentierte Programm kann sich im Laufe der weiteren Entwicklung in der Online-Version verändern.
Franz Fiala
Letzte Artikel von Franz Fiala (Alle anzeigen)
- Neue Folgen im Physik-Universum - 18. Dezember 2023
- Große Dateien in WordPress - 17. Dezember 2023
- Wien-Panorama - 16. Dezember 2023
Neueste Kommentare