Inhalte ausblenden
bearbeitet von Gunnar Bittersmann@@Meowsalot
> Hallo Meowsalot,
>
> ich habe es so hinbekommen: [https://codepen.io/anon/pen/PRaLbB](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:
> ~~~js
> 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`.
> ~~~js
> 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"]`{:.language-css.bad}: 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"])`{:.language-css.bad} 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>`{:.language-html}-Tags im HTML-Code gäbe; [kein Aprilscherz](https://twitter.com/g16n/status/980347124901728257).)
Als Nachfahrenelement `#eintraege[data-filtered="true"] tr:not([data-name-sender="User1"])`{:.language-css.bad} 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"])`{:.language-css}
Das funktioniert dann schon mal:
~~~CSS
#eintraege[data-filtered="true"] > tbody > tr:not([data-name-sender="User1"])
{
display: none;
}
~~~
Aber nicht die Kombination
~~~CSS, bad
#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-sender="User1"` haben:
~~~CSS, good
#eintraege[data-filtered="true"] > tbody > tr:not([data-name-sender="User1"]):not([data-name-empf="User1"])
{
display: none;
}
~~~
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann