data attribute

[dedlfix]

Tach!

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.

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.

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 tr.style.displayzu bearbeiten.

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.

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.

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.

table.classList.toggle('some_rows_hidden', checked_status);

und im CSS kann fest notiert stehen

table.some_rows_hidden tr[data-whatever] {
  display:none;
}

Statt data-whatever musst du natürlich einen Selektor nehmen, der für deinen Fall zutrifft.

dedlfix.