Inhalte ausblenden

[Gunnar Bittersmann]

@@Meowsalot

Hallo Meowsalot,

ich habe es so hinbekommen: https://codepen.io/anon/pen/PRaLbB

Sieht doch schon mal ganz gut aus. Der Button ändert sein aria-pressed-Attribut und das data-filtered-Attribut der Tabelle.

Noch eins, zwei Anmerkungen:

        filterButtonElement.addEventListener('click', (e) => {  
          let pressed = e.target.getAttribute('aria-pressed') === 'true'
          e.target.setAttribute('aria-pressed', String(!pressed));
        });

Ich bin kein Freund von diesem e-Dingens, sondern von sprechenden Variablen. Ich nenne das immer event.

        filterButtonElement.addEventListener('click', (e) => {  
          let pressed = e.target.getAttribute('data-filtered') === 'true'
          document.getElementById('eintraege').setAttribute('data-filtered','true');
        });

        filterButtonElement.addEventListener('click', (e) => {  
          let text = e.target.textContent === 'Alle anzeigen' ? 'Nur meine anzeigen' : 'Alle anzeigen';
          e.target.textContent = text;
        });

Warum 2× EventListener? Das gehört doch alles zusammen, sollte also in einem Block stehen.

Allerdings verschwinden meine Einträge noch immer nicht

Das liegt daran, dass deine Selektoren im Stylesheet nicht greifen:

• #eintraege [data-filtered="true"]: Nicht ein Nachfahrenelement des Elements mit der ID "eintraege" (d.h. der Tabelle) hat das data-filtered-Attribut, sondern die Tabelle selbst. Das Leerzeichen muss weg.

• #eintraege[data-filtered="true"] > tr:not([data-name-sender="User1"]) geht immer noch nicht, weil tr kein Kindelement von table ist. > ist aber der Kombinator für direkte Nachfahren.

  (Das wäre auch so, wenn es keine <tbody>-Tags im HTML-Code gäbe; kein Aprilscherz.)

  Als Nachfahrenelement #eintraege[data-filtered="true"] tr:not([data-name-sender="User1"]) ohne > selektiert ist wohl aber auch nicht das, was du willst, denn die Kopfzeile im thead soll ja stehenbleiben.

  Also nur die Zeilen im tbody selektiert: #eintraege[data-filtered="true"] > tbody > tr:not([data-name-sender="User1"])

Das funktioniert dann schon mal:

#eintraege[data-filtered="true"] > tbody > tr:not([data-name-sender="User1"])
{
	display: none;
}

Aber nicht die Kombination

#eintraege[data-filtered="true"] > tbody > tr:not([data-name-sender="User1"]),
#eintraege[data-filtered="true"] > tbody > tr:not([data-name-empf="User1"])
{
	display: none;
}

Dann sind alle Zeilen weg, die kein data-name-sender="User1" haben, also auch die Zeilen, die data-name-empf="User1" haben. Und es sind alle Zeilen weg, die kein data-name-empf="User1" haben, also auch die Zeilen, die data-name-sender="User1" haben.

Du willst aber alle Zeilen weghaben, die weder data-name-sender="User1" noch data-name-empf="User1" haben:

#eintraege[data-filtered="true"] > tbody > tr:not([data-name-sender="User1"]):not([data-name-empf="User1"])
{
	display: none;
}

LLAP 🖖