HTML/Tabellen/Gestaltung mit JavaScript

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


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

  1. SELF-Forum: Tabellenspalte bei :hover markieren von Matthias Apsel vom 03.11.2019