tag:forum.selfhtml.org,2005:/self data attribute – SELFHTML-Forum 2019-05-13T22:11:07Z https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748630#m1748630 Bernd 2019-05-13T15:05:52Z 2019-05-13T15:05:52Z data attribute <p>Hallo,</p> <p>habe ich die Möglichkeit über ein data attribute bestimmte Tabellenzeilen auszublenden. Am besten wäre natürlich über eine Checkbox</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748636#m1748636 dedlfix 2019-05-13T15:15:14Z 2019-05-13T15:15:14Z data attribute <p>Tach!</p> <blockquote> <p>habe ich die Möglichkeit über ein data attribute bestimmte Tabellenzeilen auszublenden. Am besten wäre natürlich über eine Checkbox</p> </blockquote> <p>Nein und ja. Ein data-Attribute ist lediglich ein Platz für Daten. Was irgendein Code damit macht, ist ihm freigestellt. Andererseits ist es im Prinzip auch egal, woher der Ausblender seine Daten bezieht.</p> <p>Aber frag einfach mal konkreter. Einfach nur etwas auszublenden anhand des data-Attributes sollte auch nur mit CSS gehen, aber dann eher statisch als interaktiv.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748642#m1748642 ursus contionabundo 2019-05-13T15:40:38Z 2019-05-13T15:40:38Z data attribute <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has#Browser_compatibility" rel="nofollow noopener noreferrer">Jein</a>.</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748657#m1748657 Bernd 2019-05-13T17:23:37Z 2019-05-13T17:23:37Z data attribute <p>Hallo,</p> <blockquote> <p>Aber frag einfach mal konkreter. Einfach nur etwas auszublenden anhand des data-Attributes sollte auch nur mit CSS gehen, aber dann eher statisch als interaktiv.</p> </blockquote> <p>ich habe eine Tabelle mit ca. 1000 Einträgen. Einige davon interessieren mich nicht, sollten aber dennoch zu verfügung stehen. Deshalb dachte ich, ich könnte diese irgendwie anhand einem data attribute ausblenden, im Code dürfen die natürlich noch vorhanden sein.</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748658#m1748658 Bernd 2019-05-13T17:23:50Z 2019-05-13T17:23:50Z data attribute <p>Das sieht ja ganz schlecht aus </p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748662#m1748662 JürgenB https://www.j-berkemeier.de 2019-05-13T17:50:41Z 2019-05-13T17:50:41Z data attribute <p>Hallo Bernd,</p> <p>wie wäre es mit dem hidden-Attribut? Das kann man auch mit JavaScript setzen und entfernen.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748663#m1748663 dedlfix 2019-05-13T17:54:09Z 2019-05-13T17:54:09Z data attribute <p>Tach!</p> <blockquote> <blockquote> <p>Aber frag einfach mal konkreter. Einfach nur etwas auszublenden anhand des data-Attributes sollte auch nur mit CSS gehen, aber dann eher statisch als interaktiv.</p> </blockquote> <p>ich habe eine Tabelle mit ca. 1000 Einträgen. Einige davon interessieren mich nicht, sollten aber dennoch zu verfügung stehen. Deshalb dachte ich, ich könnte diese irgendwie anhand einem data attribute ausblenden, im Code dürfen die natürlich noch vorhanden sein.</p> </blockquote> <p>Es geht also eigentlich darum, bestimmte tr-Elemente auf 'display:none' zu setzen. Alternativ könnte man wohl auch das hidden-Attribut setzen. Das geht dann aber nur für jedes tr einzeln, ähnlich wie <code>tr.style.display</code>zu bearbeiten.</p> <p>Ich nehme mal an, dass die erwähnte Checkbox irgendwo zentral sitzt und nicht in jeder Zeile eine. Also dass sich bestimmte Zeilen aufgrund gemeinsamer Merkmale identifieren lassen, die zusammen ein- und ausgeblendet werden sollen. Wenn das der Fall ist, ist ein data-Attribut prinzipiell nicht anders, als ein bestimmter Wert in der class-Liste. Mit anderen Worten, man kann sowas auch mit anderen Dingen realiseren als mit data-Attributen. Wenn jedoch das data-Attribut sowieso da ist (vielleicht weil es bereits für etwas anderes genutzt wird), kann man das natürlich auch verwenden.</p> <p>Die Lösung lässt sich meines Erachtens rein mit CSS realisieren, wenn sich die Selektoren verknüpfen lassen, zum Beispiel mit einem Sibling Selector. Die Checkbox jedenfalls hat ein :checked-Pseudoklassenselektor.</p> <p>Das ist jedoch nicht in jedem Fall möglich. Dann wird man mit Javascript nachhelfen müssen. Ich würde dann je nach Zustand der Checkbox dem table-Element einen bestimmten class-Wert umschalten.</p> <pre><code class="block language-js">table<span class="token punctuation">.</span>classList<span class="token punctuation">.</span><span class="token function">toggle</span><span class="token punctuation">(</span><span class="token string">'some_rows_hidden'</span><span class="token punctuation">,</span> checked_status<span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>und im CSS kann fest notiert stehen</p> <pre><code class="block language-css"><span class="token selector">table.some_rows_hidden tr[data-whatever]</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Statt <code>data-whatever</code> musst du natürlich einen Selektor nehmen, der für deinen Fall zutrifft.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748664#m1748664 dedlfix 2019-05-13T17:55:43Z 2019-05-13T17:55:43Z data attribute <p>Tach!</p> <blockquote> <p>Das sieht ja ganz schlecht aus </p> </blockquote> <p>Ja, wenn man meint <code>:has()</code> zu benötigen. Aber ich wüsste jetzt nicht wofür.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748668#m1748668 ursus contionabundo 2019-05-13T18:19:51Z 2019-05-13T18:23:30Z data attribute <blockquote> <blockquote> <blockquote> <p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:has#Browser_compatibility" rel="nofollow noopener noreferrer">Jein</a>. Das sieht ja ganz schlecht aus </p> </blockquote> </blockquote> <p>Ja, wenn man meint <code>:has()</code> zu benötigen. Aber ich wüsste jetzt nicht wofür.</p> <p>dedlfix.</p> </blockquote> <p>Für etwas wie</p> <pre><code class="block bad language-css"><span class="token selector">table.selected_rows_hidden tr:has( td input.hide_the_f_row:checked )</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>natürlich. CSS kann ja (bisher) das Elternelement nicht selektieren. Dann bräuchte man nämlich kein Javascript für das Ansinnen.</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748675#m1748675 JürgenB https://www.j-berkemeier.de 2019-05-13T18:55:21Z 2019-05-13T18:55:21Z data attribute <p>Hallo,</p> <blockquote> <pre><code class="block bad language-css"><span class="token selector">table.selected_rows_hidden tr:has( td input.hide_the_f_row:checked )</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>dann wird das aber mit dem „wieder Einblenden“ etwas schwierig </p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748677#m1748677 dedlfix 2019-05-13T18:58:20Z 2019-05-13T18:58:20Z data attribute <p>Tach!</p> <blockquote> <blockquote> <p>Ja, wenn man meint <code>:has()</code> zu benötigen. Aber ich wüsste jetzt nicht wofür.</p> </blockquote> <p>Für etwas wie</p> <pre><code class="block bad language-css"><span class="token selector">table.selected_rows_hidden tr:has( td input.hide_the_f_row:checked )</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>natürlich. CSS kann ja (bisher) das Elternelement nicht selektieren. Dann bräuchte man nämlich kein Javascript für das Ansinnen.</p> </blockquote> <p>Ach ja. Also wenn das data-Attribut auf den Zellen sitzt statt auf der Zeile, dann wäre :has() eine Möglichkeit, die Zeile zu selektieren, wenn sie Kinder mit bestimmten Bedingungen hat.</p> <p>Das wäre übrigens auch bei <a href="https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748663#m1748663" rel="noopener noreferrer">meinem Vorschlag</a> zu berücksichtigen, dass die Selektionskriterien auf dem <code>tr</code> angesiedelt sein sollten. Ansonsten müsste man etwas mehr Javascript auf das Problem werfen, um aus Zellen-Informationen ein Zeilen-Kriterium zu generieren. Oder man muss bei jeden Checkbox-Click über alle tr iterieren, um aus deren Kindern Daten zu holen, welche Zeile zu ändern ist.</p> <p>dedlfix.</p> https://forum.selfhtml.org/self/2019/may/13/data-attribute/1748684#m1748684 ursus contionabundo 2019-05-13T22:11:07Z 2019-05-13T22:11:47Z data attribute <blockquote> <p>Hallo,</p> <blockquote> <pre><code class="block bad language-css"><span class="token selector">table.selected_rows_hidden tr:has( td input.hide_the_f_row:checked )</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span>none<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>dann wird das aber mit dem „wieder Einblenden“ etwas schwierig </p> </blockquote> <p>Nein. <code>!important</code> und eine select-box in einer Zeile→Zelle der Tabelle würde damit (<code>:has()</code>) und dafür reichen.</p>