nicht angemeldet
Tabelle mit createElement und div erstellen
Tabellenkalk
MudGuard
Gunnar Bittersmann
Matthias Scharwies
Rolf BHallo
Ich lese daten aus eine DB aus und übergebe Sie mit json zurück zu meinem JavaScript. Das klappt auch alles. Nun möchte ich die Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.
Leider bekomme ich das nicht ganz hin, da mit der Datensatz immer nur in eine Zelle geschrieben wird. Kann mir da jemand helfen?
Danke
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type">
<meta content="text/html />
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test Tabelle</title>
<script type="text/javascript">
function loadSelection() {
var jsarray = ["2018-07-13","15:27:00","München","Teststrasse","Dortmund","2018-07-13","22:43:00","Berlin","Allee 4","Ulm"];
var jsarraytext;
var Ausgabebereich = document.getElementById('tb_fahrt');
var divtr = document.createElement('div');
var divtd = document.createElement('div');
divtr.className = "tr";
divtd.className = "td";
divtr.appendChild(divtd);
divtd.appendChild(document.createTextNode(jsarray[0]));
divtd.appendChild(document.createTextNode(jsarray[1]));
divtd.appendChild(document.createTextNode(jsarray[2] + "/ \n" + jsarray[3]));
divtd.appendChild(document.createTextNode(jsarray[4]));
Ausgabebereich.appendChild(divtd);
}
</script>
</head>
<html>
<body onload="loadSelection()">
<div id="tb_fahrt" class="table">
<div class="tr">
<div class="td-kopf">Datum</div>
<div class="td-kopf">Uhrzeit</div>
<div class="td-kopf">von /<br>Haltestelle</div>
<div class="td-kopf">nach</div>
</div>
</div>
</body>
</html>
-
Hallo,
Nun möchte ich die Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.
Bist du offen für Neues? Es gibt da seit neulich für html das table-Element. Mit Unterstützung von Zeilen und Spalten!
Gruß
Kalk-
Moin,
das
tablekann sogar noch mehr: Man kann<div class="td-kopf">mit<th>abkürzen. Tolle Erfindung, diesestable😂Viele Grüße
Robert
-
-
Hi,
Das klappt auch alles. Nun möchte ich die Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.
Und warum nicht - so wie es sich für eine Tabelle gehört - mit table, thead, tbody, tr, td und th?
Leider bekomme ich das nicht ganz hin, da mit der Datensatz immer nur in eine Zelle geschrieben wird.
function loadSelection() { var jsarray = ["2018-07-13","15:27:00","München","Teststrasse","Dortmund","2018-07-13","22:43:00","Berlin","Allee 4","Ulm"];Sollen das mehrere Datensätze sein?
Dann hätte ich eher sowas erwartet:
[ ["2018-07-13","15:27:00","München","Teststrasse","Dortmund"], ["2018-07-13","22:43:00","Berlin","Allee 4","Ulm"] ];var divtr = document.createElement('div'); var divtd = document.createElement('div'); divtr.appendChild(divtd); divtd.appendChild(document.createTextNode(jsarray[0])); divtd.appendChild(document.createTextNode(jsarray[1])); divtd.appendChild(document.createTextNode(jsarray[2] + "/ \n" + jsarray[3])); divtd.appendChild(document.createTextNode(jsarray[4]));Du erzeugst genau ein divtd und packst dann 4 Texte in das eine divtd. Wieso erwartest Du, daß es dann mehrere divtd geben sollte?
Aber wie gesagt, das mit den div ist Unsinn.
cu,
Andreas a/k/a MudGuard -
Lieber sascha321,
Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.
warum darf die Tabelle keine Tabelle sein?
Leider bekomme ich das nicht ganz hin, da mit der Datensatz immer nur in eine Zelle geschrieben wird.
Verstehe ich nicht. "Zelle"? Du hast doch gar keine Tabelle!
var divtr = document.createElement('div'); var divtd = document.createElement('div'); divtr.className = "tr"; divtd.className = "td"; divtr.appendChild(divtd); divtd.appendChild(document.createTextNode(jsarray[0])); divtd.appendChild(document.createTextNode(jsarray[1])); divtd.appendChild(document.createTextNode(jsarray[2] + "/ \n" + jsarray[3])); divtd.appendChild(document.createTextNode(jsarray[4]));Du erstellst exakt zwei (2)
<div>, nämlichdivtrunddivtd. In letzteres schreibst Du Textknoten und hängst es zuletzt in ersteres. Works as designed.Hättest Du eine Tabelle, würdest Du ein
<tr>erzeugen, in welches Du für jeden Eintrag injsarrayein neues(!)tdeinhängen würdest. Das könnte man so natürlich auch mit Divitis lösen - aber warum sollte man das?Liebe Grüße,
Felix Riesterer.
-
@@sascha321
Nun möchte ich die Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.
Das ist falsch. Heute wie vor 12 Jahren.
<div id="tb_fahrt" class="table"> <div class="tr"> <div class="td-kopf">Datum</div> <div class="td-kopf">Uhrzeit</div> <div class="td-kopf">von /<br>Haltestelle</div> <div class="td-kopf">nach</div> </div> </div>Das sollte so aussehen:
<table id="tb_fahrt"> <thead> <tr> <th>Datum</th> <th>Uhrzeit</th> <th>von /<br>Haltestelle</th> <th>nach</th> </tr> </thead> <tbody> </tbody> </table>Zum Einfügen von Tabellenzeilen/-zellen gibt es in JavaScript spezielle Methoden:
insertRow()undinsertCell().LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Hallo
Nun bin ich leider nicht schlauer, wieso gibt es dann das hier?
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Alternativen_zu_Tabellen ?
Ich dachte das wäre die einfacher variante :-(
-
Servus!
Hallo
Nun bin ich leider nicht schlauer, wieso gibt es dann das hier?
https://wiki.selfhtml.org/wiki/HTML/Tutorials/Alternativen_zu_Tabellen ?
Ich dachte das wäre die einfacher variante :-(
Das Problem war, dass man in den frühen 2000ern Tabellen zum Layouten missbraucht hat - für tabellarische Daten haben sie ihre Berechtigung.
Ein Tutorial, in dem eine Tabelle mit JavaScript erzeugt wird:
JavaScript/Tutorials/Monatskalender
Herzliche Grüße
Matthias Scharwies
--
"An alle, die nie an mich geglaubt haben und gesagt haben, aus mir werde nie was. Ich bin jetzt Admin bei einer WhatsApp Gruppe!"-
@@Matthias Scharwies
dass man in den frühen 2000ern Tabellen zum Layouten missbraucht hat
Die Verwendung des Perfekts zeigt an, dass die Vergangenheit noch nicht abgeschlossen ist‽ 🤔
Mich hat die Vergangenheit letztens wieder eingeholt – CSS-unfähigem PDF-Generator und WYSIWYG-Editor sei kein Dank.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
-
@@Felix Riesterer
welcher Editor war das?
Einer, der sich selbst nicht so wichtig nimmt, wenn ich tiny richtig übersetze.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann-
Lieber Gunnar,
wenn ich tiny richtig übersetze.
der TinyMCE lässt sich sehr gut konfigurieren, um vernünftiges HTML5 zu generieren. Inwiefern das mit Deinem PDF-Erzeuger und CSS nicht hinhaut, kann ich nicht beurteilen.
Liebe Grüße,
Felix Riesterer.
-
Da möchte ich doch auch mal was zu fragen. Ich habe das mit Javascript immer so erstellt Tabelle mit Javascript
Ist das Ok so ?
-
Hallo,
Ist das Ok so ?
Hab nur die ersten beiden Zeilen gelesen: 5 spalten angegeben, durchgezählt: 6
Bei den Zeilen genauso...Gruß
Kalk -
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 trstatttr.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.5oder 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
--
sumpsi - posui - clusi
-
-
@@Felix Riesterer
der TinyMCE lässt sich sehr gut konfigurieren, um vernünftiges HTML5 zu generieren.
Wenn man denjenigen, die Inhalte einpflegen die Möglichkeit geben möchte, Inhalte gridartig anzuordnen, dann bleibt bei einem WYSIWYG-Editor doch nur ein Layouttabelle, oder? Oder gibt es mittlerweile WYSIWYG-Editoren, die CSS-Grid beherrschen?
Inwiefern das mit Deinem PDF-Erzeuger und CSS nicht hinhaut, kann ich nicht beurteilen.
PDF-Generator und WYSIWYG-Editor waren zwei verschiedene Fälle, die nicht miteinander zu tun haben.
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-
-
-
-
-
-