Tabelle mit createElement und div erstellen

[Rolf B]

Hallo basti1012,

nein, das ist nicht ganz ok so. Und damit meine ich nicht das von Kalk erwähnte +1 Problem…

Es ist unnötig, das tr Element im thead und tbody mit Klassen zu versehen, NUR um den thead Bereich als solchen zu unterscheiden. Das kann man im CSS auch mit einem entsprechenden Selektor lösen, also z.B. thead tr statt tr.thclass. Zumeist ist selbst das nicht nötig, du hast ja unterschiedliche Zellen-Elemente (th vs td), d.h. wenn Du mit dem Stylen der th auskommst und nicht das tr Element im thead stylen willst, reicht im Stylesheet der th Selektor.

Wenn Du Text in ein Element setzt, und es wirklich TEXT ist, dann nimmst Du nicht innerHTML. Denn ein Schreiben dieser Eigenschaft interpretiert deinen Text als HTML, und Du müsstest aufpassen, keine HTML Steuerzeichen (<, >, &) drin zu haben. Nimm für Text die textContent Eigenschaft. Die gibt's sogar im IE seit Version 9, das ist kompatibel genug :)

Ganz schlecht ist das großzügige Verteilen von IDs. Vor allem dann, wenn sie nicht eindeutig sind. IDs muss man nur den Elementen geben, die eine brauchen. Wenn deine Zellen eine brauchen, dann eine ID mit Zeilen- und Spaltennummer, z.B. td7.5 oder so. Es dürfte grundsätzlich effizienter sein, Zugriffe auf Zellen im tbody mittels Zeilen- und Spaltenindex über die children-Collections von tbody und tr durchzuführen. Ob querySelector("tr:nth-of-type(...) td:nth-of-type(...)") sich lohnt, glaube ich auch nicht, habe es aber auch nicht getestet.

Tja, und dann wollte ich noch einen zum Thema DocumentFragment raushauen, weil das typischerweise doppelt so schnell ist. So mein letzter Stand. Aber was soll ich sagen; ich wollte Zahlen liefern, habe probiert und es war mit DocumentFragment kaum schneller als ohne. In FF und Chrome zumindest. Auf Mobilbrowsern mag es anders sein.

Idee ist jedenfalls, sich per document.createDocumentFragment() erstmal einen Sandkasten zum Bauen zu beschaffen. In das Fragment hängt man alle Knoten so rein, wie man es auch direkt im DOM tun würde. Und am Schluss fügt man das Fragment mit appendChild ins gewünschte Container-Element ein. Die Elemente im Fragment werden dabei verschoben, das Fragment ist nachher leer. Mess mal selbst, wie sich das bei Dir auswirkt (also mit deutlich mehr als 5x10 Zellen und mit (new Date()).getTime() zu Beginn und Ende als Messpunkte).

Das Prinzip "baue einen riesigen HTML String und hau ihn auf einen Schlag ins DOM", wie es manche Libs verfolgen, kann ich nach meinen Messungen bedingt empfehlen. Es ist schwer lesbar, man verirrt sich gern mit Anführungszeichen und Escapes, und Chrome wird nicht schneller. Firefox dagegen schon.

Rolf