HTML/Tabellen/Gestaltung mit JavaScript
Aus SELFHTML-Wiki
Tabellenspalte bei :hover markieren
Früher war es mit CSS nicht möglich, eine Tabellenspalte bei :hover markieren.[1]. Mittlerweile sind zwei Verfahren bekannt, die wir im Abschnitt zur Tabellengestaltung mit CSS vorstellen.
Eine Alternative besteht in der Verwendung von JavaScript. Voraussetzung ist hier, dass im Markup der Tabelle ein col-Element für jede Tabellenspalte vorgesehen wird.
Tabllenspalte bei :hover markieren
ansehen …
const tableElement = document.querySelector('table');
const colElements = tableElement.querySelectorAll('col');
function findColumnFor(element) {
const cell = event.target.closest('td,th');
return cell ? colElements[cell.cellIndex] : null;
}
tableElement.addEventListener('mouseover', event => {
const col = findColumnFor(event.target);
if (col)
col.classList.add('hover');
});
tableElement.addEventListener('mouseout', (event) => {
const col = findColumnFor(event.target);
if (col)
col.classList.remove('hover');
});
Mit Einsatz des Optional Chaining Operators ?. kann man die Eventhandler noch kompakter formulieren, aber diese Syntax wird von SelfHTML Frickl nicht unterstützt.
// Optional Chaining statt Temp-Variable und if
tableElement.addEventListener('mouseover', event => {
findColumnFor(event.target)?.classList.add('hover');
});
Quellen
- ↑ SELF-Forum: Tabellenspalte bei :hover markieren von Matthias Apsel vom 03.11.2019