tag:forum.selfhtml.org,2005:/self Rechnen mit Javascript in einer Tabelle – SELFHTML-Forum 2019-11-29T10:18:27Z https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760732#m1760732 Pit 2019-11-27T18:15:55Z 2019-11-27T20:33:36Z Rechnen mit Javascript in einer Tabelle <p>Hallo Forum,</p> <p>ich habe eine tabellarische Aufstellung und möchte beim "Checken" einer Checkbox die KB-Werte derselben Zeile addieren. Diese habe ich in ein span-Element derselben Zeile mit der ID "myKB" gesetzt.</p> <p>Wie gehe ich da am Besten vor?</p> <p>(Edit Rolf B: HTML für Lesbarkeit reformatiert)</p> <pre><code class="block language-javascript"><span class="token operator"><</span>table<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td <span class="token constant">WIDTH</span><span class="token operator">=</span><span class="token string">"25%"</span> <span class="token constant">ALIGN</span><span class="token operator">=</span><span class="token constant">RIGHT</span><span class="token operator">></span>Test<span class="token operator">:</span> <span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td width<span class="token operator">=</span><span class="token number">1</span><span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span> name<span class="token operator">=</span><span class="token string">"myAuswahl[]"</span> value<span class="token operator">=</span><span class="token string">"5"</span> checked<span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td colspan<span class="token operator">=</span><span class="token number">2</span><span class="token operator">></span>Test <span class="token number">1</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">27</span><span class="token operator">-</span><span class="token number">11</span><span class="token operator">-</span><span class="token number">2019</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td width<span class="token operator">=</span><span class="token number">10</span><span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"myKB"</span><span class="token operator">></span><span class="token number">102</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> kb<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td <span class="token constant">WIDTH</span><span class="token operator">=</span><span class="token string">"25%"</span> <span class="token constant">ALIGN</span><span class="token operator">=</span><span class="token constant">RIGHT</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td width<span class="token operator">=</span><span class="token number">1</span><span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span> name<span class="token operator">=</span><span class="token string">"myAuswahl[]"</span> value<span class="token operator">=</span><span class="token string">"4"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td colspan<span class="token operator">=</span><span class="token number">2</span><span class="token operator">></span>Test <span class="token number">2</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">27</span><span class="token operator">-</span><span class="token number">11</span><span class="token operator">-</span><span class="token number">2019</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td width<span class="token operator">=</span><span class="token number">10</span><span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"myKB"</span><span class="token operator">></span><span class="token number">102</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> kb<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td <span class="token constant">WIDTH</span><span class="token operator">=</span><span class="token string">"25%"</span> <span class="token constant">ALIGN</span><span class="token operator">=</span><span class="token constant">RIGHT</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td width<span class="token operator">=</span><span class="token number">1</span><span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span> name<span class="token operator">=</span><span class="token string">"myAuswahl[]"</span> value<span class="token operator">=</span><span class="token string">"3"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td colspan<span class="token operator">=</span><span class="token number">2</span><span class="token operator">></span>Test <span class="token number">3</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">27</span><span class="token operator">-</span><span class="token number">11</span><span class="token operator">-</span><span class="token number">2019</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td width<span class="token operator">=</span><span class="token number">10</span><span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"myKB"</span><span class="token operator">></span><span class="token number">692</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> kb<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span>tr<span class="token operator">></span> <span class="token operator"><</span>td <span class="token constant">WIDTH</span><span class="token operator">=</span><span class="token string">"25%"</span> <span class="token constant">ALIGN</span><span class="token operator">=</span><span class="token constant">RIGHT</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td width<span class="token operator">=</span><span class="token number">1</span><span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span> name<span class="token operator">=</span><span class="token string">"myAuswahl[]"</span> value<span class="token operator">=</span><span class="token string">"2"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td colspan<span class="token operator">=</span><span class="token number">2</span><span class="token operator">></span>Test <span class="token number">4</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td<span class="token operator">></span><span class="token number">25</span><span class="token operator">-</span><span class="token number">11</span><span class="token operator">-</span><span class="token number">2019</span><span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span>td width<span class="token operator">=</span><span class="token number">10</span><span class="token operator">%</span><span class="token operator">></span><span class="token operator"><</span>span id<span class="token operator">=</span><span class="token string">"myKB"</span><span class="token operator">></span><span class="token number">692</span><span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> kb<span class="token operator"><</span><span class="token operator">/</span>td<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>tr<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>table<span class="token operator">></span> </code></pre> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760733#m1760733 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-11-27T18:36:00Z 2019-11-27T18:36:00Z Rechnen mit Javascript in einer Tabelle <p>Hallo Pit,</p> <blockquote> <p>ich habe eine tabellarische Aufstellung und möchte beim "Checken" einer Checkbox die KB-Werte derselben Zeile addieren. Diese habe ich in ein span-Element derselben Zeile mit der ID "myKB" gesetzt.</p> <p>Wie gehe ich da am Besten vor?</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>102<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name"><td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>102<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name"><td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>692<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><td </code></pre> </blockquote> <p>Eine ID muss dokumentweit eindeutig sein.</p> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760735#m1760735 JürgenB https://www.j-berkemeier.de 2019-11-27T18:42:24Z 2019-11-27T18:42:24Z Rechnen mit Javascript in einer Tabelle <p>Hallo Pit,</p> <p>erst mal solltest du dein HTML in Ordnung bringen. Wenn du den Inputs ein Label spendiest, kannst du wahrscheinlich auf die Tabelle verzichten.</p> <p>Dann müssen IDs eindeutig sein.</p> <p>Auf die Elemente kannst du dann mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Document/querySelector" rel="nofollow noopener noreferrer">querySelector</a> zugreifen, und an deren Inhalt kommst du z.B. mit <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/textContent" rel="nofollow noopener noreferrer">textContent</a>. Da der Zugriff erst nach dem Aufbau der Seite funktioniert, muss dein Script entweder im HTML hinter den Datenfeldern stehen, oder über den Eventhandler <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Event/DOMContentLoaded" rel="nofollow noopener noreferrer">DOMContentLoaded</a> aufgerufen werden. Den Zustand von Checkboxen kannst du über die Eigenschaft <code>.checked</code> abfragen.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760738#m1760738 Felix Riesterer https://felix-riesterer.de 2019-11-27T18:49:18Z 2019-11-27T18:49:39Z Rechnen mit Javascript in einer Tabelle <p>Lieber Pit,</p> <blockquote> <p>name="myAuswahl[]"</p> </blockquote> <p>wozu hat der Name eckige Klammern? Das macht man eigentlich dann, wenn die Daten serverseitig von PHP ausgewertet werden sollen, da PHP bei "Klammernamen" ein Array anlegt.</p> <p>Dein Posting hat aber als Tag "JavaScript", so dass ich davon ausgehen muss, dass Du hier rein clientseitig auswerten möchtest. Stimmt diese Annahme?</p> <p>Für eine JS-basierte Lösung holst Du Dir alle Elemente, die den passenden Namen tragen und addierst die Werte im <code>value</code>-Attribut (dort sollten die Größen in Bytes stehen!), wenn die Checkbox gesetzt ist.</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> bytes <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// Ergebnis</span> <span class="token comment">// alle ausgewählten Elemente mit name="myAuswahl[]"</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'[name="myAuswahl[]"]:checked'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> bytes <span class="token operator">+=</span> element<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// In `bytes` steht einen Integer, den man nun nach KB/MB/GB umrechnen kann.</span> </code></pre> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760751#m1760751 Pit 2019-11-27T20:32:11Z 2019-11-27T20:32:11Z Rechnen / Liebe Leute <p>Hsllo Forum und danke an alle Antworter,</p> <p>erstens danke für die Antworten.</p> <p>Zweitens, die Tabelle ist schon ok, da es eine tabellarische Aufführung der Anhänge ist, die hier in Frage kommen.</p> <p>@Felix: Di eckigen Klammern sind ok, ich möchte php-sekitig ein Array "einkassieren" </p> <p>@Jürgen / @Felix: Ja, genau um die KB geht es... und nochmal ja, event. hätte ich den value der Checkbox hierfür sin nvoll nuzten können, ich weiß es nicht. Daher meine Frage.</p> <p>Aber es geht tatsächlich darum: Ich habe eine Tabelle, in einer der Zellen der Zeilen steht die Dateigröße, in derselben Zeile ist die Checkbiox und ich möchte js.seitig (also im Client) prüfen, ob der User zuviele KB zum Versenden ausgewählt hat.</p> <p>Gruß und nochmal danke für Eure Hilfe,</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760826#m1760826 pl https://rolfrost.de/call.htm 2019-11-29T10:18:27Z 2019-11-29T10:18:27Z Rechnen mit Javascript in einer Tabelle <blockquote> <p>Wie gehe ich da am Besten vor?</p> </blockquote> <p>Am Besten so: Du hältst die Daten für die Tabelle in einem Objekt. Mit diesem Daten wird die Tabelle gerendert (z.B. mit mustache.js ).</p> <p>Und wenn ein bestimmtes Ereignis fällt, wird nicht in der Tabelle rumgemacht, sondern es werden die Daten im Objekt geändert. Erst danach wird die Tabelle neu gerendert.</p> <p>Eine Vorgehensweise die sich bestens bewährt hat, MFG</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760734#m1760734 Pit 2019-11-27T18:39:07Z 2019-11-27T18:39:07Z Rechnen mit Javascript in einer Tabelle <p>Hallo Matthias,</p> <blockquote> <blockquote> <p>Wie gehe ich da am Besten vor?</p> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>102<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name"><td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>102<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name"><td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>692<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><td </code></pre> </blockquote> <p>Eine ID muss dokumentweit eindeutig sein.</p> </blockquote> <p>Ach herrje... das weiß ich natürlich. Hatte es aber vergessen, dank Dir für den Hinweis. </p> <p>Ok, wenn ich diese ID in eine Klasse ändere, welchen Weg zum kummulierten Ergebnis sollte ich dann gehen? Ich habe das vor Jahren schonmal gemachzt und es funktionierte supi, aber ich finds grad nicht mehr </p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760748#m1760748 Felix Riesterer https://felix-riesterer.de 2019-11-27T20:25:52Z 2019-11-27T20:25:52Z Rechnen mit Javascript in einer Tabelle <p>Lieber Pit,</p> <blockquote> <blockquote> <blockquote> <pre><code class="block bad language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>102<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name"><td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>102<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span> <span class="token attr-name"><td</span> <span class="token attr-name">width</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span>10%</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</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>myKB<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>692<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> kb<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>tr</span><span class="token punctuation">></span></span><td </code></pre> </blockquote> </blockquote> </blockquote> <p>Wenn denn die Tabelle wirklich sein muss (muss sie nicht), dann eher so (<a href="https://jsfiddle.net/jesgu13L/" rel="noopener noreferrer">Fiddle dazu</a>):</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>table</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>Test1<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>Test2<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>Test3<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>Test4<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>tr</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAuswahl-1<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>102<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span> 102 KB <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAuswahl-2<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>42<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span> 42 KB <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAuswahl-3<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>9<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span> 9 KB <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>td</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</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>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>myAuswahl-4<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>962<span class="token punctuation">"</span></span> <span class="token attr-name">checked</span><span class="token punctuation">></span></span> 962 KB <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>label</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>td</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>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> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span><span class="token punctuation">></span></span>Summe: <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>output</span><span class="token punctuation">></span></span>?<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>output</span><span class="token punctuation">></span></span>KB<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</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 punctuation">></span></span> </code></pre> <pre><code class="block language-javascript"><span class="token keyword">const</span> elements <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'[name^="myAuswahl-"]'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> elements<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">el</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> el<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> summe <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> elements<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">checkbox</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>checkbox<span class="token punctuation">.</span>checked<span class="token punctuation">)</span> <span class="token punctuation">{</span> summe <span class="token operator">+=</span> <span class="token function">parseFloat</span><span class="token punctuation">(</span>checkbox<span class="token punctuation">.</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">"output"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>value <span class="token operator">=</span> summe<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// Anfangswert berechnen</span> elements<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">dispatchEvent</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Event</span><span class="token punctuation">(</span><span class="token string">"change"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> </code></pre> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760740#m1760740 JürgenB https://www.j-berkemeier.de 2019-11-27T18:59:52Z 2019-11-27T19:01:53Z Rechnen mit Javascript in einer Tabelle <p>Hallo Felix,</p> <blockquote> <pre><code class="block language-javascript"><span class="token keyword">var</span> bytes <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// Ergebnis</span> <span class="token comment">// alle ausgewählten Elemente mit name="myAuswahl[]"</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'[name="myAuswahl[]"]:checked'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> bytes <span class="token operator">+=</span> element<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// In `bytes` steht einen Integer, den man nun nach KB/MB/GB umrechnen kann.</span> </code></pre> </blockquote> <p>so liest du aber die Checkboxen aus, die Bytes stehen im span neben den Checkboxen. Evtl. hilft hier <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/nextElementSibling" rel="nofollow noopener noreferrer">nextElementSibling</a>.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760741#m1760741 Der Martin 2019-11-27T19:01:53Z 2019-11-27T19:01:53Z Rechnen mit Javascript in einer Tabelle <p>Hallo Felix,</p> <blockquote> <blockquote> <p>name="myAuswahl[]"</p> </blockquote> <p>wozu hat der Name eckige Klammern? Das macht man eigentlich dann, wenn die Daten serverseitig von PHP ausgewertet werden sollen, da PHP bei "Klammernamen" ein Array anlegt.</p> </blockquote> <p>vielleicht hat Pit das mit genau diesem Zweck mal gesehen und unbewusst nachgemacht.</p> <blockquote> <p>Für eine JS-basierte Lösung holst Du Dir alle Elemente, die den passenden Namen tragen und addierst die Werte im <code>value</code>-Attribut (dort sollten die Größen in Bytes stehen!), wenn die Checkbox gesetzt ist.</p> <pre><code class="block language-javascript"><span class="token keyword">var</span> bytes <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> <span class="token comment">// Ergebnis</span> <span class="token comment">// alle ausgewählten Elemente mit name="myAuswahl[]"</span> document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">'[name="myAuswahl[]"]:checked'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">element</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> bytes <span class="token operator">+=</span> element<span class="token punctuation">.</span>value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// In `bytes` steht einen Integer, den man nun nach KB/MB/GB umrechnen kann.</span> </code></pre> </blockquote> <p>Ganz so einfach ist rs nicht, obwohl dein Lösungsansatz einen Extrapunkt für Eleganz verdient hätte. Du addierst hier die value-Angaben der Checkboxen. Die interessanten kB-Werte hat Pit aber in <em>span</em>s in völlig anderen Tebellenzellen stehen.</p> <p>Abgesehen davon müsste Pit vermutlich auch sein HTML grundlegend in Ordnung bringen. Ich krieg's im Moment nicht eindeutig sortiert, aber es sieht für mich so aus, als wären tr- und td-Elemente ziemlich durcheinandergekommen.</p> <p>Schönen Abend,<br>  Martin</p> <div class="signature">-- <br> Frage an die Kollegin am Montagmorgen: "Na, wie war dein Wochenende?"<br> Depressive Kollegin: "Hell, dunkel, hell, dunkel, Montag." </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760746#m1760746 Felix Riesterer https://felix-riesterer.de 2019-11-27T20:06:46Z 2019-11-27T20:06:46Z Rechnen mit Javascript in einer Tabelle <p>Lieber JürgenB,</p> <blockquote> <p>Evtl. hilft hier <a href="https://wiki.selfhtml.org/wiki/JavaScript/DOM/Node/nextElementSibling" rel="nofollow noopener noreferrer">nextElementSibling</a>.</p> </blockquote> <p>wirklich "helfen" tut es das nur bedingt. Pit hätte es deutlich leichter, wenn er die <code>value</code>-Attribute der Checkboxen sinnvoll benutzte.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760742#m1760742 JürgenB https://www.j-berkemeier.de 2019-11-27T19:03:32Z 2019-11-27T19:03:32Z Rechnen mit Javascript in einer Tabelle <p>Hallo Martin,</p> <blockquote> <p>Abgesehen davon müsste Pit vermutlich auch sein HTML grundlegend in Ordnung bringen. Ich krieg's im Moment nicht eindeutig sortiert, aber es sieht für mich so aus, als wären tr- und td-Elemente ziemlich durcheinandergekommen.</p> </blockquote> <p>die Tabelle kann ganz weg.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760745#m1760745 Felix Riesterer https://felix-riesterer.de 2019-11-27T20:05:29Z 2019-11-27T20:05:29Z Rechnen mit Javascript in einer Tabelle <p>Lieber Martin,</p> <blockquote> <p>Du addierst hier die value-Angaben der Checkboxen.</p> </blockquote> <p>richtig. Dort sollten die zu addierenden Werte auch stehen.</p> <blockquote> <p>Die interessanten kB-Werte hat Pit aber in <em>span</em>s in völlig anderen Tebellenzellen stehen.</p> </blockquote> <p>Ja, das finde ich sehr ungeschickt. Aber egal wie schräg sein Markup auch sein mag, für die JS-Lösung könnte er die Werte in Byte als <code>value</code>-Attribute notieren. Das macht das Auswerten sehr leicht.</p> <blockquote> <p>Abgesehen davon müsste Pit vermutlich auch sein HTML grundlegend in Ordnung bringen. Ich krieg's im Moment nicht eindeutig sortiert, aber es sieht für mich so aus, als wären tr- und td-Elemente ziemlich durcheinandergekommen.</p> </blockquote> <p>Das ist mir hier wirklich egal. Ich wollte nur mit JS Werte addieren.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760750#m1760750 Rolf B 2019-11-27T20:30:59Z 2019-11-27T20:30:59Z Rechnen mit Javascript in einer Tabelle <p>Hallo Martin,</p> <blockquote> <p>tr- und td-Elemente ziemlich durcheinandergekommen.</p> </blockquote> <p>sind sie aber nicht. Nur die Zeilenumbrüche sind etwas spärlich. Das HTML enthält mitten im Gewühl ein paar <code></tr><tr></code>, bricht man da um, dann geht's.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760749#m1760749 Rolf B 2019-11-27T20:29:13Z 2019-11-27T20:29:13Z Rechnen mit Javascript in einer Tabelle <p>Hallo JürgenB,</p> <p>das ist aber für die Problemstellung irrelevant. Wenn's eine Liste wird, gibt es ebenfalls Checkboxen und man muss von der Checkbox zum Werte-Span kommen.</p> <p>An der prinzipiellen Vorgehensweise ändert sich nichts. Man muss die aktiven Checkboxen finden, von dort zum Zeilencontainer und weiter zum Span.</p> <p>Vertrauen in fehlerfreies HTML vorausgesetzt, ist das tatsächlich als Einzeiler machbar:</p> <pre><code class="block language-js"> <span class="token keyword">let</span> summe <span class="token operator">=</span> <span class="token class-name">Array</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span> table<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"[name='myAuswahl[]']:checked"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">sum<span class="token punctuation">,</span> cb</span><span class="token punctuation">)</span> <span class="token operator">=></span> sum <span class="token operator">+</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>cb<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"tr"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".myKB"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Das muss mit reduce.call gemacht werden, weil die Nodelist die reduce-Methode nicht kennt. Die Implementierung auf Array.prototype kommt aber mit Nodelisten klar.</p> <p>Etwas ausführlicher und ohne Array.reduce:</p> <pre><code class="block language-js"> <span class="token comment">// In table wird das HTMLElement erwartet, das dem <table> Element entspricht</span> <span class="token keyword">let</span> checked <span class="token operator">=</span> table<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"[name='myAuswahl[]']:checked"</span><span class="token punctuation">)</span> <span class="token keyword">let</span> summe <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span> checked<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">cb</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">let</span> row <span class="token operator">=</span> cb<span class="token punctuation">.</span><span class="token function">closest</span><span class="token punctuation">(</span><span class="token string">"tr"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ältere Browser brauchen Polyfill</span> <span class="token keyword">let</span> kbSpan <span class="token operator">=</span> row<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">".myKB"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// von der Row zum Werte-Span</span> <span class="token keyword">let</span> value <span class="token operator">=</span> <span class="token function">parseInt</span><span class="token punctuation">(</span>kbSpan<span class="token punctuation">.</span>textContent<span class="token punctuation">)</span><span class="token punctuation">;</span> summe <span class="token operator">=</span> summe <span class="token operator">+</span> value<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>Verwendet man eine Liste statt einer Table, muss man die Variable table mit der Liste initialisieren und statt closest("tr") setzt man closest("li") - oder ähnlich, je nach verwendetem Listen-Element-Container.</p> <p>Einen Polyfill für closest findet man bei Mozilla.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760754#m1760754 Rolf B 2019-11-27T20:35:54Z 2019-11-28T07:20:37Z Rechnen / Liebe Leute <p>Hallo Pit,</p> <p>ich hoffe, <a href="https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760749#m1760749" rel="noopener noreferrer">das hier</a> hilft Dir.</p> <p>Aber Du weißt doch, wie's hier zugehen kann. <ironie>HTML muss blitzeblank, zugänglich und bedienbar sein, andernfalls wird erstmal darüber diskutiert bis der Fragesteller entnervt verschwindet.</ironie></p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760755#m1760755 Felix Riesterer https://felix-riesterer.de 2019-11-27T20:36:25Z 2019-11-27T20:36:25Z Rechnen / Liebe Leute <p>Lieber Pit,</p> <blockquote> <p>@Felix: Di eckigen Klammern sind ok, ich möchte php-sekitig ein Array "einkassieren" </p> </blockquote> <p>verstehe. Na, dann viel Erfolch!</p> <blockquote> <p>event. hätte ich den value der Checkbox hierfür sin nvoll nuzten können, ich weiß es nicht. Daher meine Frage.</p> </blockquote> <p><a href="https://jsfiddle.net/jesgu13L/" rel="noopener noreferrer">Ein Fiddle dazu</a> habe ich Dir ja gepostet.</p> <blockquote> <p>und ich möchte js.seitig (also im Client) prüfen, ob der User zuviele KB zum Versenden ausgewählt hat.</p> </blockquote> <p>Und wenn er das hat, möchtest Du ihm eine Warnung geben, dass ein Upload deshalb scheitern würde?</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760758#m1760758 Pit 2019-11-27T20:47:37Z 2019-11-27T20:47:37Z Rechnen / Liebe Leute <p>Hallo Rolf,</p> <blockquote> <p>ich hoffe, <a href="https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer%E2%88%92tabelle/1760749#m1760749" rel="noopener noreferrer">das hier</a> hilft Dir.</p> </blockquote> <p>Nicht wirklich...ein 404er hilft ganz selten Kannst Du den Link fixen?</p> <blockquote> <p>Aber Du weißt doch, wie's hier zugehen kann. <ironie>HTML muss blitzeblank, zugänglich und bedienbar sein, andernfalls wird erstmal darüber diskutiert bis der Fragesteller entnervt verschwindet.</ironie></p> </blockquote> <p>Ich weiß schon, aber im Laufe der Jahre habe ich mich an den "brutalen Charme" dieses Forums gewöhnt und finds ehrlich gesagt schon ok...</p> <p>Alles liebe nette Leute hier und mir wurde schon sooo viel und wirklich grundlegend geholfen, das passt also schon!</p> <p>Gruß an Dich und alle anderen,</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760756#m1760756 Pit 2019-11-27T20:39:51Z 2019-11-27T20:39:51Z Rechnen / Liebe Leute <p>Hallo Felix,</p> <blockquote> <p>Und wenn er das hat, möchtest Du ihm eine Warnung geben, dass ein Upload deshalb scheitern würde?</p> </blockquote> <p>Genau darum geht es :-)</p> <p>Ist halt für den uyser immer ien wenig doof, wenn der Server es erst meldet... clientmäßig ist es userfreundlicher... </p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760757#m1760757 Pit 2019-11-27T20:42:33Z 2019-11-27T20:42:33Z Rechnen / Liebe Leute <p>Ach Felix,</p> <blockquote> <p><a href="https://jsfiddle.net/jesgu13L/" rel="noopener noreferrer">Ein Fiddle dazu</a> habe ich Dir ja gepostet.</p> </blockquote> <p>Habe ich verpasst! Danke! Ichn muss aber morgeb genau herein schauen...heute bion ich echt platt, aber morgen früh ist das mein erster Aufruf </p> <p>Danke nochmal und Gruß,Pit!</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760759#m1760759 Pit 2019-11-27T20:56:50Z 2019-11-27T20:56:50Z Rechnen / Liebe Leute <p>Wow! Cool! Danke <a href="/users/243" class="mention registered-user" rel="noopener noreferrer">@Felix Riesterer</a>, werde ich morgen (versuchen) nach(zu)vollziehen... Dann mehr von mir und "heel bedankt"!</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760770#m1760770 Rolf B 2019-11-28T07:21:45Z 2019-11-28T07:22:20Z Rechnen / Liebe Leute <p>Hallo Pit,</p> <p>also ich habe jetzt das gleiche gemacht wie gestern: eine Foren-URL mit Copy+Paste kopiert. Gestern hat er mir aber offenbar einen der Bindestriche typographisch umgedeutet...</p> <p>Der Link funktioniert jetzt, ist aber letztlich nur ein Beitrag in einem anderen Ast dieses Themas.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760760#m1760760 Der Martin 2019-11-27T21:06:18Z 2019-11-27T21:20:55Z Rechnen / Liebe Leute <p>Hey Pit,</p> <blockquote> <p>Dann mehr von mir und "heel bedankt"!</p> </blockquote> <p>wow, je praat Nederlands? Ik ben er echt verrast!</p> <p>Doei,<br>  Martin</p> <div class="signature">-- <br> Frage an die Kollegin am Montagmorgen: "Na, wie war dein Wochenende?"<br> Depressive Kollegin: "Hell, dunkel, hell, dunkel, Montag." </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760773#m1760773 Pit 2019-11-28T07:42:03Z 2019-11-28T07:42:03Z Rechnen / Liebe Leute <p>Hallo Felix nochmal,</p> <p>ich habe es mir angeguckt und finde es wunderbar, genau das, was ich suchte. Bis darauf, dass ich das Ergebnis auf dem Server gerne als Array haben würde, deshalb habe ich ein wenig <a href="https://jsfiddle.net/zp1mq4no/" rel="noopener noreferrer">umgebaut</a>, nun passt es perfekt.</p> <p>Danke für Deine Hilfe und schönen Tag,</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760761#m1760761 Pit 2019-11-27T21:20:27Z 2019-11-27T21:20:27Z Rechnen / Liebe Leute <blockquote> <p>Hey Pit,</p> <blockquote> <p>Dann mehr von mir und "heel bedankt"!</p> </blockquote> <p>wow, je praat Nederlands? Ik ben echt verrast!</p> <p>Doei,<br>  Martin</p> </blockquote> <p>Nederlands is heel mooi, toch? Maar je spreekt het ook, toch? Ik ben opgegroeid in Aken, dat heel dicht bij de grens ligt. En ik leerde de taal op school </p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760762#m1760762 Der Martin 2019-11-27T21:32:30Z 2019-11-27T22:07:46Z Rechnen / Liebe Leute <p>Hallo,</p> <blockquote> <p>Nederlands is heel mooi, toch?</p> </blockquote> <p>naja, ik lief de taal, maar bijzonders de leden voor hun vriendlijkheid.</p> <blockquote> <p>Maar je spreekt het ook, toch?</p> </blockquote> <p>Ja, een beetje. Het werkt omdat naar de radio of televisie nieuws te luisteren, of voor een beetje smalltalk op de straat.</p> <blockquote> <p>Ik ben opgegroeid in Aken, dat heel dicht bij de grens ligt. En ik leerde de taal op school </p> </blockquote> <p>Ik heb de taal geleerd slechts als een toerist over vele jaren. En ik was verrasd dat in de voorbije drie of vier jaar ik kunde een boek in Nederlands vloeiend lezen en verstaan!</p> <p>Groeten uit het Zwaben,<br>  Martin</p> <div class="signature">-- <br> Frage an die Kollegin am Montagmorgen: "Na, wie war dein Wochenende?"<br> Depressive Kollegin: "Hell, dunkel, hell, dunkel, Montag." </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760763#m1760763 Pit 2019-11-27T21:44:19Z 2019-11-27T21:44:19Z Rechnen / Liebe Leute <blockquote> <p>Groeten uit het Zwaben,<br>  Martin</p> </blockquote> <p>Eerlijk gezegd ben ik nu verrast! Ik leerde de taal op school en groeide op aan de grens en bracht vele jaren (tot op de dag van vandaag) in Nederland door. En jij spreekt de taal zo goed als ik ... heel cool! Compliment voor Zwaben!</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760764#m1760764 Der Martin 2019-11-27T21:54:44Z 2019-11-27T21:54:44Z Rechnen / Liebe Leute <p>Goeden avond</p> <blockquote> <p>Eerlijk gezegd ben ik nu verrast! Ik leerde de taal op school en groeide op aan de grens en bracht vele jaren (tot op de dag van vandaag) in Nederland door. En jij spreekt de taal zo goed als ik ... heel cool! Compliment voor Zwaben!</p> </blockquote> <p>*rode kop krijg*<br> dank je wel ...</p> <p>Doei,<br>  Martin</p> <p>PS: But hey, that's not a miracle, considering all those countless holiday trips to the Nederlands.<br> But I'm also fluent in English, my favorite language.</p> <div class="signature">-- <br> Frage an die Kollegin am Montagmorgen: "Na, wie war dein Wochenende?"<br> Depressive Kollegin: "Hell, dunkel, hell, dunkel, Montag." </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760774#m1760774 Pit 2019-11-28T07:49:23Z 2019-11-28T07:49:23Z Rechnen / Liebe Leute <p>Hallo Rolf,</p> <blockquote> <p>Der Link funktioniert jetzt, ist aber letztlich nur ein Beitrag in einem anderen Ast dieses Themas.</p> <p><em>Rolf</em></p> </blockquote> <p>Aber gut, dass Du ihn nochmal neu gepostet hast, denn diesen Post hatte ich gestern tatsächlich verpasst. Und ja, der hätte mir auch geholfen. Zur Übung werde ich auch mal versuchen, diesen Tip umzusetzen. Und das span-element hatte ich ansich nur deshalb gesetzt, weil ich es für nötig hielt, um die Tabellenzelle zu finden... im Prinzip könnte das span nun auch weggelassen werden...</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760775#m1760775 Pit 2019-11-28T08:06:31Z 2019-11-28T08:06:31Z Rechnen / Eine kleine Nachfrage <blockquote> <p>Hallo Felix nochmal,</p> <p>ich habe es mir angeguckt und finde es wunderbar, genau das, was ich suchte. Bis darauf, dass ich das Ergebnis auf dem Server gerne als Array haben würde, deshalb habe ich ein wenig <a href="https://jsfiddle.net/zp1mq4no/" rel="noopener noreferrer">umgebaut</a>, nun passt es perfekt.</p> </blockquote> <p>...da ich im Original das value der Checkbox bereits mit der ID des Tabelleneintrags belegt habe, habe ich die ID des Tabelleneintrags nun in den Key des Arrays gesetzt, also in etwa so:</p> <p><code>name=checkbox[$datenausDB[0]] value=$datenausDB[3]</code></p> <p>Gibt es daran irgendetwas zu beanstanden (von fehlenden " mal abgesehen)?</p> <p>Hat sogar den Vorteil, dass ich dann serverseitig nicht nur die ID (im Key) erhalte, sondern gleich auch die KB des Eintrages... wobei ich die normalerweise aus der DB gezogen hätte (was auch sicherer wäre).</p> <p>Aber nochmal...gibt es etwas, was dagegen spricht, die ID des Eintrages per Arraykey weiterzugeben?</p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760779#m1760779 Rolf B 2019-11-28T09:24:51Z 2019-11-28T09:24:51Z Rechnen / Eine kleine Nachfrage <p>Hallo Pit,</p> <p>du müsstest 3 Sekunden darüber nachdenken, welche Arten von Zeichen in deiner Datenbank stehen, und je nach Ergebnis noch htmlspecialchars() hinzufügen.</p> <p>Beim Empfangen darfst Du Dich nicht darauf verlassen, dass Du das Form so zurückbekommst wie Du es gesendet hast. Pöse Purchen (die man zu Poden chleudern sollte) sind überall, und wenn jemand am Form herummanipuliert und Dir ungültige Keys sendet (vielleicht sogar mit SQL Injection drin), dann darfst Dich das deinerseits nicht zu Poden chleudern...</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760810#m1760810 Felix Riesterer https://felix-riesterer.de 2019-11-29T05:36:25Z 2019-11-29T05:36:25Z Rechnen / Eine kleine Nachfrage <p>Lieber Pit,</p> <blockquote> <p>dass ich das Ergebnis auf dem Server gerne als Array haben würde,</p> </blockquote> <p>diesen Wunsch kann ich verstehen. Dafür muss es aber nicht zwingend PHP-typische Extrawürste geben.</p> <blockquote> <p><code>name=checkbox[$datenausDB[0]] value=$datenausDB[3]</code></p> </blockquote> <p>Kann man so machen, muss man aber nicht.</p> <pre><code class="block language-php"><span class="token variable">$posted</span> <span class="token operator">=</span> <span class="token keyword">array</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">foreach</span> <span class="token punctuation">(</span><span class="token variable">$_POST</span> <span class="token keyword">as</span> <span class="token variable">$key</span> <span class="token operator">=></span> <span class="token variable">$value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token function">preg_match</span><span class="token punctuation">(</span><span class="token string single-quoted-string">'~^myAuswahl-(\d+)$~'</span><span class="token punctuation">,</span> <span class="token variable">$key</span><span class="token punctuation">,</span> <span class="token variable">$found</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// $found enthält "myAuswahl-1234"</span> <span class="token comment">// $found[1] enthält "1234" (wegen Klammern)</span> <span class="token variable">$posted</span><span class="token punctuation">[</span><span class="token variable">$found</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword type-casting">int</span><span class="token punctuation">)</span> <span class="token variable">$value</span><span class="token punctuation">;</span> <span class="token comment">// $posted[1234] bekommt integer $value</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <blockquote> <p>Hat sogar den Vorteil, dass ich dann serverseitig nicht nur die ID (im Key) erhalte, sondern gleich auch die KB des Eintrages... wobei ich die normalerweise aus der DB gezogen hätte (was auch sicherer wäre).</p> </blockquote> <p>Tut mein Mini-Code auch.</p> <blockquote> <p>Aber nochmal...gibt es etwas, was dagegen spricht, die ID des Eintrages per Arraykey weiterzugeben?</p> </blockquote> <p>Nö.</p> <p>Liebe Grüße</p> <p>Felix Riesterer</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760781#m1760781 Pit 2019-11-28T09:48:38Z 2019-11-28T09:48:38Z Rechnen / Eine kleine Nachfrage <p>Hallo Rolf,</p> <blockquote> <p>du müsstest 3 Sekunden darüber nachdenken, welche Arten von Zeichen in deiner Datenbank stehen, und je nach Ergebnis noch htmlspecialchars() hinzufügen.</p> <p>Beim Empfangen darfst Du Dich nicht darauf verlassen, dass Du das Form so zurückbekommst wie Du es gesendet hast. Pöse Purchen (die man zu Poden chleudern sollte) sind überall, und wenn jemand am Form herummanipuliert und Dir ungültige Keys sendet (vielleicht sogar mit SQL Injection drin), dann darfst Dich das deinerseits nicht zu Poden chleudern...</p> </blockquote> <p>Danke für den Hinweis... in diesem Fall sollten die pösen Purschen tatsächlich von mir zu Poden geschleudert werden, da ich jeden Wert, der "von außen" kommt, daraufhin prüfe, was ich erwarte. In diesem Fall also einen Integer. </p> <p>Pit</p> https://forum.selfhtml.org/self/2019/nov/27/rechnen-mit-javascript-in-einer-tabelle/1760825#m1760825 Pit 2019-11-29T08:11:15Z 2019-11-29T08:11:15Z Rechnen / Eine kleine Nachfrage <p>Hi Felix,</p> <p>ich hab jetzt Deine Lösung genommen, habe sie nur von nativem JS auf Jquery umgeschrieben, da ich eh Jquery nutze.</p> <p>Auf diese Art konnte ich auch die ganze Pfiffigeit Deiner Lösung nachvollziehen. Ich fand die each-Funktion innerhalb der change-Funktion wirklich eine sehr gute Idee. Das erspart nämlich die Unterscheidung, ob die jeweilige KB-Größe addiert oder subtrahiert werden muß. Ich habe das Ganze dann noch darum erweitert, dass ein Max.-Limit nicht überschritten werden darf. Was das Array angeht, ich habs in <code>$('[name^=myAuswahl]').change(function() {</code> geändert, damit kann ich es serverseitig ganz normal und ohne Regex auswerten.</p> <p>Gruß, Pit</p>