CSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Es wäre schön, wenn du dein Bespiel berichtigen würdest, damit es als gutes Beispiel dienen kann.
Das ist gar nicht so schwer. Füge in die jeweils letzte Zelle jeder Spalte einen Button ein:
`<td class="showSelected"><button aria-label="ausgewählt" aria-pressed="false"></button></td>`{:.language-html}
(in der Zeile `<tr class="gewaehlt">`{:.language-html} mit `aria-pressed="true"`)
Statt für `td.showSelected`{:.language-css} die Stile dann für `td.showSelected > button`{:.language-css} und wenn du magst, Rahmen, Padding und Hintergrund weg:
~~~CSS
.tiger tbody tr td.showSelected > button{ width: 1em; border: none; padding: 0; background: transparent; }
.tiger tbody tr td.showSelected > button::after { content: "⦙⦙⦙⦙"; }
⋮
.tiger tbody tr.gewaehlt td.showSelected > button::after { content: "✓"; }
~~~
Den Fabwechsel bei `:hover`{:.language-css} auch für Tastatursteuerung, d.h. für `:focus-within`{:.language-css}, also die Selektoren ergänzen:
~~~CSS
.tiger tbody tr:hover, .tiger tbody tr:focus-within { background-color:#efe; }
⋮
.tiger tbody tr.gewaehlt:hover, .tiger tbody tr.gewaehlt:focus-within { background-color:#fdb; }
~~~
Im JavaScript kannst du fast alles so lassen; EventListener auf `tr` kann ja so bleiben *(event delegation)*{:@en}. Natürlich sollen Mausnutzer auch weiterhin auf die gesamte Fläche der Zeile clicken können.
Zusätzlich zur Klasse der Zeile ist lediglich noch das `aria-pressed`-Attribut umzuschalten, damit das ein funktionierender [Toggle-Button](https://inclusive-components.design/toggle-button/) ist. Hinzugefügt:
* `var button = this.querySelector('td.showSelected > button');`{:.language-js}
* `button.setAttribute('aria-pressed', 'false');`{:.language-js} im THEN-Zweig
* `button.setAttribute('aria-pressed', 'true');`{:.language-js} im ELSE-Zweig
Das war’s dann auch schon. ☞ [anzusehen](https://bittersmann.de/test/tabelle_getigert_js_auswahl.html)
(Stillschweigend berichtigt: Leerzeichen weg bei `<!doctype html>`{:.language-html}, `/` rein bei `</body>`{:.language-html}.)
Da gibt’s natürlich noch Verbesserungspotential:
* Elemente nicht im Eventhandler jedesmal neu im DOM suchen, sondern initial und in Variablen ablegen.
* Klassen nicht per `className`{:.language-js} umschalten (was sowieso keine gute Idee ist, wenn noch andere Klassen im Spiel sind, die nicht geändert werden sollen), sondern mit dem [`classList`{:.language-js}-Objekt](https://developer.mozilla.org/docs/Web/API/Element/classList), welches auch eine Methode `toggle()`{:.language-js} bietet.
* **[Nachtrag]** nicht für jede Tabellenzeile einen EventListener, sondern einen für die ganze Tabelle *(event delegation)*{:@en}.
* **[Nachtrag]** `button::after` nicht in Abhängigkeit von `class="gewaehlt"` des `tr`-Vorfahren stylen, sondern in Abhängigkeit von seinem eigenen `aria-pressed`-Attribut, d.h.
~~~CSS
button[aria-pressed="false"]::after { content: "⦙⦙⦙⦙"; }
button[aria-pressed="true"]::after { content: "✓"; }
~~~
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
CSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Es wäre schön, wenn du dein Bespiel berichtigen würdest, damit es als gutes Beispiel dienen kann.
Das ist gar nicht so schwer. Füge in die jeweils letzte Zelle jeder Spalte einen Button ein:
`<td class="showSelected"><button aria-label="ausgewählt" aria-pressed="false"></button></td>`{:.language-html}
(in der Zeile `<tr class="gewaehlt">`{:.language-html} mit `aria-pressed="true"`)
Statt für `td.showSelected`{:.language-css} die Stile dann für `td.showSelected > button`{:.language-css} und wenn du magst, Rahmen, Padding und Hintergrund weg:
~~~CSS
.tiger tbody tr td.showSelected > button{ width: 1em; border: none; padding: 0; background: transparent; }
.tiger tbody tr td.showSelected > button::after { content: "⦙⦙⦙⦙"; }
⋮
.tiger tbody tr.gewaehlt td.showSelected > button::after { content: "✓"; }
~~~
Den Fabwechsel bei `:hover`{:.language-css} auch für Tastatursteuerung, d.h. für `:focus-within`{:.language-css}, also die Selektoren ergänzen:
~~~CSS
.tiger tbody tr:hover, .tiger tbody tr:focus-within { background-color:#efe; }
⋮
.tiger tbody tr.gewaehlt:hover, .tiger tbody tr.gewaehlt:focus-within { background-color:#fdb; }
~~~
Im JavaScript kannst du fast alles so lassen; EventListener auf `tr` kann ja so bleiben *(event delegation)*{:@en}. Natürlich sollen Mausnutzer auch weiterhin auf die gesamte Fläche der Zeile clicken können.
Zusätzlich zur Klasse der Zeile ist lediglich noch das `aria-pressed`-Attribut umzuschalten, damit das ein funktionierender [Toggle-Button](https://inclusive-components.design/toggle-button/) ist. Hinzugefügt:
* `var button = this.querySelector('td.showSelected > button');`{:.language-js}
* `button.setAttribute('aria-pressed', 'false');`{:.language-js} im THEN-Zweig
* `button.setAttribute('aria-pressed', 'true');`{:.language-js} im ELSE-Zweig
Das war’s dann auch schon. ☞ [anzusehen](https://bittersmann.de/test/tabelle_getigert_js_auswahl.html)
(Stillschweigend berichtigt: Leerzeichen weg bei `<!doctype html>`{:.language-html}, `/` rein bei `</body>`{:.language-html}.)
Da gibt’s natürlich noch Verbesserungspotential:
* Elemente nicht im Eventhandler jedesmal neu im DOM suchen, sondern initial und in Variablen ablegen.
* Klassen nicht per `className`{:.language-js} umschalten (was sowieso keine gute Idee ist, wenn noch andere Klassen im Spiel sind, die nicht geändert werden sollen), sondern mit dem [`classList`{:.language-js}-Objekt](https://developer.mozilla.org/docs/Web/API/Element/classList), welches auch eine Methode `toggle()`{:.language-js} bietet.
* **[Nachtrag]** nicht für jede Tabellenzeile einen EventListener, sondern einen für die ganze Tabelle *(event delegation)*{:@en}.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
CSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Es wäre schön, wenn du dein Bespiel berichtigen würdest, damit es als gutes Beispiel dienen kann.
Das ist gar nicht so schwer. Füge in die jeweils letzte Zelle jeder Spalte einen Button ein:
`<td class="showSelected"><button aria-label="ausgewählt" aria-pressed="false"></button></td>`{:.language-html}
(in der Zeile `<tr class="gewaehlt">`{:.language-html} mit `aria-pressed="true"`)
Statt für `td.showSelected`{:.language-css} die Stile dann für `td.showSelected > button`{:.language-css} und wenn du magst, Rahmen, Padding und Hintergrund weg:
~~~CSS
.tiger tbody tr td.showSelected > button{ width: 1em; border: none; padding: 0; background: transparent; }
.tiger tbody tr td.showSelected > button::after { content: "⦙⦙⦙⦙"; }
⋮
.tiger tbody tr.gewaehlt td.showSelected > button::after { content: "✓"; }
~~~
Den Fabwechsel bei `:hover`{:.language-css} auch für Tastatursteuerung, d.h. für `:focus-within`{:.language-css}, also die Selektoren ergänzen:
~~~CSS
.tiger tbody tr:hover, .tiger tbody tr:focus-within { background-color:#efe; }
⋮
.tiger tbody tr.gewaehlt:hover, .tiger tbody tr.gewaehlt:focus-within { background-color:#fdb; }
~~~
Im JavaScript kannst du fast alles so lassen; EventListener auf `tr` kann ja so bleiben *(event delegation)*{:@en}. Natürlich sollen Mausnutzer auch weiterhin auf die gesamte Fläche der Zeile clicken können.
Zusätzlich zur Klasse der Zeile ist lediglich noch das `aria-pressed`-Attribut umzuschalten, damit das ein funktionierender [Toggle-Button](https://inclusive-components.design/toggle-button/) ist. Hinzugefügt:
* `var button = this.querySelector('td.showSelected > button');`{:.language-js}
* `button.setAttribute('aria-pressed', 'false');`{:.language-js} im THEN-Zweig
* `button.setAttribute('aria-pressed', 'true');`{:.language-js} im ELSE-Zweig
Das war’s dann auch schon. ☞ [anzusehen](https://bittersmann.de/test/tabelle_getigert_js_auswahl.html)
(Stillschweigend berichtigt: Leerzeichen weg bei `<!doctype html>`{:.language-html}, `/` rein bei `</body>`{:.language-html}.)
Da gibt’s natürlich noch Verbesserungspotential:
* Elemente nicht im Eventhandler jedesmal neu im DOM suchen, sondern initial und in Variablen ablegen.
* Klassen nicht per `className`{:.language-js} umschalten (was sowieso keine gute Idee ist, wenn noch andere Klassen im Spiel sind, die nicht geändert werden sollen), sondern mit dem [`classList`{:.language-js}-Objekt](https://developer.mozilla.org/docs/Web/API/Element/classList), welches auch eine Methode `toggle()`{:.language-js} bietet.
* **[Nachtrag]** nicht für jede Tabllenzeile einen EventListener, sondern einen für die ganze Tabelle *(event delegation)*{:@en}.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann
CSS Pseudoklasse auf eine bestimmte Tabelle anwenden, wenn mehrere Tabellen im Dokument vorhanden
bearbeitet von Gunnar Bittersmann@@Gunnar Bittersmann
> Es wäre schön, wenn du dein Bespiel berichtigen würdest, damit es als gutes Beispiel dienen kann.
Das ist gar nicht so schwer. Füge in die jeweils letzte Zelle jeder Spalte einen Button ein:
`<td class="showSelected"><button aria-label="ausgewählt" aria-pressed="false"></button></td>`{:.language-html}
(in der Zeile `<tr class="gewaehlt">`{:.language-html} mit `aria-pressed="true"`)
Statt für `td.showSelected`{:.language-css} die Stile dann für `td.showSelected > button`{:.language-css} und wenn du magst, Rahmen, Padding und Hintergrund weg:
~~~CSS
.tiger tbody tr td.showSelected > button{ width: 1em; border: none; padding: 0; background: transparent; }
.tiger tbody tr td.showSelected > button::after { content: "⦙⦙⦙⦙"; }
⋮
.tiger tbody tr.gewaehlt td.showSelected > button::after { content: "✓"; }
~~~
Den Fabwechsel bei `:hover`{:.language-css} auch für Tastatursteuerung, d.h. für `:focus-within`{:.language-css}, also die Selektoren ergänzen:
~~~CSS
.tiger tbody tr:hover, .tiger tbody tr:focus-within { background-color:#efe; }
⋮
.tiger tbody tr.gewaehlt:hover, .tiger tbody tr.gewaehlt:focus-within { background-color:#fdb; }
~~~
Im JavaScript kannst du fast alles so lassen; EventListener auf `tr` kann ja so bleiben *(event delegation)*{:@en}. Natürlich sollen Mausnutzer auch weiterhin auf die gesamte Fläche der Zeile clicken können.
Zusätzlich zur Klasse der Zeile ist lediglich noch das `aria-pressed`-Attribut umzuschalten, damit das ein funktionierender [Toggle-Button](https://inclusive-components.design/toggle-button/) ist. Hinzugefügt:
* `var button = this.querySelector('td.showSelected > button');`{:.language-js}
* `button.setAttribute('aria-pressed', 'false');`{:.language-js} im THEN-Zweig
* `button.setAttribute('aria-pressed', 'true');`{:.language-js} im ELSE-Zweig
Das war’s dann auch schon. ☞ [anzusehen](https://bittersmann.de/test/tabelle_getigert_js_auswahl.html)
(Stillschweigend berichtigt: Leerzeichen weg bei `<!doctype html>`{:.language-html}, `/` rein bei `</body>`{:.language-html}.)
Da gibt’s natürlich noch Verbesserungspotential:
* Elemente nicht im Eventhandler jedesmal neu im DOM suchen, sondern initial und in Variablen ablegen.
* Klassen nicht per `className`{:.language-js} umschalten (was sowieso keine gute Idee ist, wenn noch andere Klassen im Spiel sind, die nicht geändert werden sollen), sondern mit dem [`classList`{:.language-js}-Objekt](https://developer.mozilla.org/docs/Web/API/Element/classList), welches auch eine Methode `toggle()`{:.language-js} bietet.
LLAP 🖖
--
*„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“* —Kurt Weidemann