Bernd: data attribute

Hallo,

habe ich die Möglichkeit über ein data attribute bestimmte Tabellenzeilen auszublenden. Am besten wäre natürlich über eine Checkbox

  1. Tach!

    habe ich die Möglichkeit über ein data attribute bestimmte Tabellenzeilen auszublenden. Am besten wäre natürlich über eine Checkbox

    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.

    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.

    dedlfix.

    1. Hallo,

      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.

      1. Hallo Bernd,

        wie wäre es mit dem hidden-Attribut? Das kann man auch mit JavaScript setzen und entfernen.

        Gruß
        Jürgen

      2. 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.

  2. Jein.

    1. Das sieht ja ganz schlecht aus 😨

      1. Tach!

        Das sieht ja ganz schlecht aus 😨

        Ja, wenn man meint :has() zu benötigen. Aber ich wüsste jetzt nicht wofür.

        dedlfix.

        1. Jein. Das sieht ja ganz schlecht aus 😨

          Ja, wenn man meint :has() zu benötigen. Aber ich wüsste jetzt nicht wofür.

          dedlfix.

          Für etwas wie

          table.selected_rows_hidden tr:has( td input.hide_the_f_row:checked ) {
              display:none;
          }
          

          natürlich. CSS kann ja (bisher) das Elternelement nicht selektieren. Dann bräuchte man nämlich kein Javascript für das Ansinnen.

          1. Hallo,

            table.selected_rows_hidden tr:has( td input.hide_the_f_row:checked ) {
                display:none;
            }
            

            dann wird das aber mit dem „wieder Einblenden“ etwas schwierig 😀

            Gruß
            Jürgen

            1. Hallo,

              table.selected_rows_hidden tr:has( td input.hide_the_f_row:checked ) {
                  display:none;
              }
              

              dann wird das aber mit dem „wieder Einblenden“ etwas schwierig 😀

              Nein. !important und eine select-box in einer Zeile→Zelle der Tabelle würde damit (:has()) und dafür reichen.

          2. Tach!

            Ja, wenn man meint :has() zu benötigen. Aber ich wüsste jetzt nicht wofür.

            Für etwas wie

            table.selected_rows_hidden tr:has( td input.hide_the_f_row:checked ) {
                display:none;
            }
            

            natürlich. CSS kann ja (bisher) das Elternelement nicht selektieren. Dann bräuchte man nämlich kein Javascript für das Ansinnen.

            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.

            Das wäre übrigens auch bei meinem Vorschlag zu berücksichtigen, dass die Selektionskriterien auf dem tr 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.

            dedlfix.