Tabelle mit createElement und div erstellen – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self?srt=yes Tabelle mit createElement und div erstellen Sun, 15 Jul 18 06:37:43 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726576?srt=yes#m1726576 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726576?srt=yes#m1726576 <p>Hallo</p> <p>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.</p> <p>Leider bekomme ich das nicht ganz hin, da mit der Datensatz immer nur in eine Zelle geschrieben wird. Kann mir da jemand helfen?</p> <p>Danke</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">http-equiv</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Content-Type<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/html /> <meta charset=<span class="token punctuation">"</span></span><span class="token attr-name">UTF-8"</span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>Test Tabelle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript"> <span class="token keyword">function</span> <span class="token function">loadSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> jsarray <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token string">"2018-07-13"</span><span class="token punctuation">,</span><span class="token string">"15:27:00"</span><span class="token punctuation">,</span><span class="token string">"München"</span><span class="token punctuation">,</span><span class="token string">"Teststrasse"</span><span class="token punctuation">,</span><span class="token string">"Dortmund"</span><span class="token punctuation">,</span><span class="token string">"2018-07-13"</span><span class="token punctuation">,</span><span class="token string">"22:43:00"</span><span class="token punctuation">,</span><span class="token string">"Berlin"</span><span class="token punctuation">,</span><span class="token string">"Allee 4"</span><span class="token punctuation">,</span><span class="token string">"Ulm"</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token keyword">var</span> jsarraytext<span class="token punctuation">;</span> <span class="token keyword">var</span> Ausgabebereich <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'tb_fahrt'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> divtr <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> divtd <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtr<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"tr"</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"td"</span><span class="token punctuation">;</span> divtr<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>divtd<span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">"/ \n"</span> <span class="token operator">+</span> jsarray<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> Ausgabebereich<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>divtd<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> </span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token special-attr"><span class="token attr-name">onload</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token value javascript language-javascript"><span class="token function">loadSelection</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span><span class="token punctuation">"</span></span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tb_fahrt<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>table<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>td-kopf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>td-kopf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Uhrzeit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>td-kopf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>von /<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>Haltestelle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>td-kopf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>nach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 06:47:10 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726578?srt=yes#m1726578 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726578?srt=yes#m1726578 <p>Hallo,</p> <blockquote> <p>Nun möchte ich die Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.</p> </blockquote> <p>Bist du offen für Neues? Es gibt da seit neulich für html das table-Element. Mit Unterstützung von Zeilen <em>und</em> Spalten!</p> <p>Gruß<br> Kalk</p> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 06:53:14 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726579?srt=yes#m1726579 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726579?srt=yes#m1726579 <p>Hi,</p> <blockquote> <p>Das klappt auch alles. Nun möchte ich die Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.</p> </blockquote> <p>Und warum nicht - so wie es sich für eine Tabelle gehört - mit table, thead, tbody, tr, td und th?</p> <blockquote> <p>Leider bekomme ich das nicht ganz hin, da mit der Datensatz immer nur in eine Zelle geschrieben wird.</p> </blockquote> <blockquote> <pre><code class="block language-html"> function loadSelection() { var jsarray = ["2018-07-13","15:27:00","München","Teststrasse","Dortmund","2018-07-13","22:43:00","Berlin","Allee 4","Ulm"]; </code></pre> </blockquote> <p>Sollen das mehrere Datensätze sein?</p> <p>Dann hätte ich eher sowas erwartet:</p> <pre><code class="block language-javascript"><span class="token punctuation">[</span> <span class="token punctuation">[</span><span class="token string">"2018-07-13"</span><span class="token punctuation">,</span><span class="token string">"15:27:00"</span><span class="token punctuation">,</span><span class="token string">"München"</span><span class="token punctuation">,</span><span class="token string">"Teststrasse"</span><span class="token punctuation">,</span><span class="token string">"Dortmund"</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">[</span><span class="token string">"2018-07-13"</span><span class="token punctuation">,</span><span class="token string">"22:43:00"</span><span class="token punctuation">,</span><span class="token string">"Berlin"</span><span class="token punctuation">,</span><span class="token string">"Allee 4"</span><span class="token punctuation">,</span><span class="token string">"Ulm"</span><span class="token punctuation">]</span> <span class="token punctuation">]</span><span class="token punctuation">;</span> </code></pre> <blockquote> <pre><code class="block language-javascript"> <span class="token keyword">var</span> divtr <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> divtd <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtr<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>divtd<span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">"/ \n"</span> <span class="token operator">+</span> jsarray<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Du erzeugst genau ein divtd und packst dann 4 Texte in das eine divtd. Wieso erwartest Du, daß es dann mehrere divtd geben sollte?</p> <p>Aber wie gesagt, das mit den div ist Unsinn.</p> <p>cu,<br> Andreas a/k/a MudGuard</p> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 06:55:49 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726580?srt=yes#m1726580 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726580?srt=yes#m1726580 <p>Lieber sascha321,</p> <blockquote> <p>Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.</p> </blockquote> <p>warum darf die Tabelle keine Tabelle sein?</p> <blockquote> <p>Leider bekomme ich das nicht ganz hin, da mit der Datensatz immer nur in eine Zelle geschrieben wird.</p> </blockquote> <p>Verstehe ich nicht. "Zelle"? Du hast doch gar keine Tabelle!</p> <blockquote> <pre><code class="block language-javascript"> <span class="token keyword">var</span> divtr <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">var</span> divtd <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtr<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"tr"</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span>className <span class="token operator">=</span> <span class="token string">"td"</span><span class="token punctuation">;</span> divtr<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>divtd<span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">2</span><span class="token punctuation">]</span> <span class="token operator">+</span> <span class="token string">"/ \n"</span> <span class="token operator">+</span> jsarray<span class="token punctuation">[</span><span class="token number">3</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> divtd<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>document<span class="token punctuation">.</span><span class="token function">createTextNode</span><span class="token punctuation">(</span>jsarray<span class="token punctuation">[</span><span class="token number">4</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> </blockquote> <p>Du erstellst exakt zwei (2) <code><div></code>, nämlich <code>divtr</code> und <code>divtd</code>. In letzteres schreibst Du Textknoten und hängst es zuletzt in ersteres. Works as designed.</p> <p>Hättest Du eine Tabelle, würdest Du ein <code><tr></code> erzeugen, in welches Du <em>für jeden Eintrag in <code>jsarray</code></em> ein neues(!) <code>td</code> einhängen würdest. Das könnte man so natürlich auch mit <a href="https://csscreator.com/divitis" rel="nofollow noopener noreferrer">Divitis</a> lösen - aber warum sollte man das?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 08:01:01 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726583?srt=yes#m1726583 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726583?srt=yes#m1726583 <p>@@sascha321</p> <blockquote> <p>Nun möchte ich die Daten in eine Tabelle schreiben die aus div Containern gemacht werden soll.</p> </blockquote> <p>Das ist <a href="https://forum.selfhtml.org/cites/121" rel="noopener noreferrer">falsch</a>. Heute wie vor 12 Jahren.</p> <blockquote> <pre><code class="block bad language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tb_fahrt<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>table<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tr<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>td-kopf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Datum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>td-kopf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Uhrzeit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>td-kopf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>von /<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>Haltestelle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>td-kopf<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>nach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Das sollte so aussehen:</p> <pre><code class="block good language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tb_fahrt<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Datum<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>Uhrzeit<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>von /<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>Haltestelle<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>th</span><span class="token punctuation">></span></span>nach<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>th</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>thead</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>tbody</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>table</span><span class="token punctuation">></span></span> </code></pre> <p></p> <p>Zum Einfügen von Tabellenzeilen/-zellen gibt es in JavaScript spezielle Methoden: <a href="https://developer.mozilla.org/docs/Web/API/HTMLTableElement/insertRow" class="language-js" rel="nofollow noopener noreferrer"><code class="language-js"><span class="token function">insertRow</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></a> und <a href="https://developer.mozilla.org/docs/Web/API/HTMLTableRowElement/insertCell" rel="nofollow noopener noreferrer"><code class="language-js"><span class="token function">insertCell</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Tabelle mit createElement und div erstellen Mon, 16 Jul 18 06:16:32 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726635?srt=yes#m1726635 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726635?srt=yes#m1726635 <p>Moin,</p> <p>das <code>table</code> kann sogar noch mehr: Man kann <code><div class="td-kopf"></code> mit <code><th></code> abkürzen. Tolle Erfindung, dieses <code>table</code> </p> <p>Viele Grüße<br> Robert</p> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 13:38:16 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726612?srt=yes#m1726612 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726612?srt=yes#m1726612 <p>Hallo</p> <p>Nun bin ich leider nicht schlauer, wieso gibt es dann das hier?</p> <p>https://wiki.selfhtml.org/wiki/HTML/Tutorials/Alternativen_zu_Tabellen ?</p> <p>Ich dachte das wäre die einfacher variante :-(</p> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 13:42:51 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726613?srt=yes#m1726613 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726613?srt=yes#m1726613 <p>Servus!</p> <blockquote> <p>Hallo</p> <p>Nun bin ich leider nicht schlauer, wieso gibt es dann das hier?</p> <p><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Alternativen_zu_Tabellen" rel="nofollow noopener noreferrer">https://wiki.selfhtml.org/wiki/HTML/Tutorials/Alternativen_zu_Tabellen</a> ?</p> <p>Ich dachte das wäre die einfacher variante :-(</p> </blockquote> <p>Das Problem war, dass man in den frühen 2000ern Tabellen zum Layouten missbraucht hat - für tabellarische Daten haben sie ihre Berechtigung.</p> <p>Ein Tutorial, in dem eine Tabelle mit JavaScript erzeugt wird:</p> <p><a href="https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/Monatskalender" rel="nofollow noopener noreferrer">JavaScript/Tutorials/Monatskalender</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> "An alle, die nie an mich geglaubt haben und gesagt haben, aus mir werde nie was. Ich bin jetzt Admin bei einer WhatsApp Gruppe!" </div> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 14:15:32 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726614?srt=yes#m1726614 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726614?srt=yes#m1726614 <p>@@Matthias Scharwies</p> <blockquote> <p>dass man in den frühen 2000ern Tabellen zum Layouten missbraucht hat</p> </blockquote> <p>Die Verwendung des Perfekts zeigt an, dass die Vergangenheit noch nicht abgeschlossen ist‽ </p> <p>Mich hat die Vergangenheit letztens wieder eingeholt – CSS-unfähigem PDF-Generator und <a href="https://twitter.com/g16n/status/989105646204223488" rel="nofollow noopener noreferrer">WYSIWYG-Editor sei kein Dank</a>.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 14:32:12 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726616?srt=yes#m1726616 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726616?srt=yes#m1726616 <p>Lieber Gunnar,</p> <blockquote> <p><a href="https://twitter.com/g16n/status/989105646204223488" rel="nofollow noopener noreferrer">WYSIWYG-Editor sei kein Dank</a>.</p> </blockquote> <p>welcher Editor war das?</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 15:10:09 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726618?srt=yes#m1726618 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726618?srt=yes#m1726618 <p>@@Felix Riesterer</p> <blockquote> <blockquote> <p><a href="https://twitter.com/g16n/status/989105646204223488" rel="nofollow noopener noreferrer">WYSIWYG-Editor sei kein Dank</a>.</p> </blockquote> <p>welcher Editor war das?</p> </blockquote> <p>Einer, der sich selbst nicht so wichtig nimmt, wenn ich <em lang="en">tiny</em> richtig übersetze.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Tabelle mit createElement und div erstellen Sun, 15 Jul 18 21:01:53 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726631?srt=yes#m1726631 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726631?srt=yes#m1726631 <p>Lieber Gunnar,</p> <blockquote> <p>wenn ich <em lang="en">tiny</em> richtig übersetze.</p> </blockquote> <p>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.</p> <p>Liebe Grüße,</p> <p>Felix Riesterer.</p> Tabelle mit createElement und div erstellen Mon, 16 Jul 18 18:09:57 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726690?srt=yes#m1726690 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726690?srt=yes#m1726690 <p>Da möchte ich doch auch mal was zu fragen. Ich habe das mit Javascript immer so erstellt <a href="https://codepen.io/basti1012/pen/WKbgXX?editors=0010" rel="noopener noreferrer">Tabelle mit Javascript</a></p> <p>Ist das Ok so ?</p> Tabelle mit createElement und div erstellen Tue, 17 Jul 18 06:52:03 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726697?srt=yes#m1726697 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726697?srt=yes#m1726697 <p>@@Felix Riesterer</p> <blockquote> <p>der TinyMCE lässt sich sehr gut konfigurieren, um vernünftiges HTML5 zu generieren.</p> </blockquote> <p>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?</p> <blockquote> <p>Inwiefern das mit Deinem PDF-Erzeuger und CSS nicht hinhaut, kann ich nicht beurteilen.</p> </blockquote> <p>PDF-Generator und WYSIWYG-Editor waren zwei verschiedene Fälle, die nicht miteinander zu tun haben.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“</em> —Kurt Weidemann </div> Tabelle mit createElement und div erstellen Mon, 16 Jul 18 18:48:54 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726691?srt=yes#m1726691 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726691?srt=yes#m1726691 <p>Hallo,</p> <blockquote> <p>Ist das Ok so ?</p> </blockquote> <p>Hab nur die ersten beiden Zeilen gelesen: 5 spalten angegeben, durchgezählt: 6<br> Bei den Zeilen genauso...</p> <p>Gruß<br> Kalk</p> Tabelle mit createElement und div erstellen Tue, 17 Jul 18 21:33:03 Z https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726753?srt=yes#m1726753 https://forum.selfhtml.org/self/2018/jul/15/tabelle-mit-createelement-und-div-erstellen/1726753?srt=yes#m1726753 <p>Hallo basti1012,</p> <p>nein, das ist nicht ganz ok so. Und damit meine ich nicht das von Kalk erwähnte +1 Problem…</p> <p>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. <code>thead tr</code> statt <code>tr.thclass</code>. 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.</p> <p>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 :)</p> <p>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. <code>td7.5</code> 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.</p> <p>Tja, und dann wollte ich noch einen zum Thema <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/DocumentFragment" rel="nofollow noopener noreferrer">DocumentFragment</a> 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.</p> <p>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).</p> <p>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.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div>