HTML/Tabellen/Gestaltung mit JavaScript

Aus SELFHTML-Wiki
< HTML‎ | Tabellen
Wechseln zu: Navigation, Suche

Informationen zu diesem Text

Lesedauer
10min
Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
Grundkenntnisse in
● HTML
● CSS
● JavaScript


Tabellenspalte bei :hover markieren[Bearbeiten]

Mit CSS ist es nicht möglich, eine Tabellenspalte bei :hover markieren.[1] Chris Coyier von css-tricks macht's mit Pseudoelementen, was aber nicht zugänglich ist.[2]

Hier eine Variante, in der die Darstellung mit JavaScript hinzugefügt wird:

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari
Tabllenspalte bei :hover markieren ansehen …
const tableElement = document.querySelector('table');
const colElements = tableElement.querySelectorAll('col');

const toggleColumnHighlighting = event => {
	const thisCell = event.target.closest('td');
	const cells = [...thisCell.parentElement.children];
	const index = cells.findIndex(cell => cell == thisCell);
	colElements[index].classList.toggle('hover', event.type == 'mouseover');
};

tableElement.addEventListener('mouseover', toggleColumnHighlighting);
tableElement.addEventListener('mouseout', toggleColumnHighlighting);


Quellen[Bearbeiten]

  1. SELF-Forum: Tabellenspalte bei :hover markieren von Matthias Apsel vom 03.11.2019
  2. css-tricks: Simple CSS-Only Row and Column Highlighting von Chris Coyier, 13.04.2015