Tabellenfelder mit GetElementsByClassName färben

[Gunnar Bittersmann]

@@Exabyte:

nuqneH

Lässt sich mein Vorhaben mit document.getElementsByClassName umsetzen oder sollte ich dies auf eine andere Art umsetzen?

Was genau ist dein Vorhaben? Wenn über eine Tabellenzelle gehovert wird, soll diese und alle anderen Zellen derselben Klasse durch einen andersfarbigen Hintergrund markiert werden?

Wenn ja, ziehe ich „typischer Fall der Unsinnigkeit des Einsatzes von JavaScript“ zurück. Das geht mit CSS noch(!) nicht.

Es ließen sich nachfolgende Zellen selektieren à la '.\31:hover, .\31:hover ~ .\31', aber nicht vorangegangene. (Diese erst mit CSS4-Selektoren.)

(Das führende Ziffern in Klassenselektoren escapet werden müssen, könnte ein guter Grund sein, keine solchen Klassenbezeichner zu verwenden.)

In deiner JavaScipt-Funktion brauchst du den Klassenbezeichner nicht als Parameter zu übergeben. Die Klasse der gerade gehoverten Zelle (die das Evant feuert) kannst du ja per JavaScript abfragen.

Am einfachsten und performatesten dürfte auch sein, nicht alle betreffenden Tabellenzellen zufärben (und wieder zu entfärben), sondern bei einem Elternelement (table bietet sich an) den Status zu speichen (als Klasse oder data-*-Attribut) und die Darstellung per Nachfahrenselektor mit CSS zu machen.

Und nicht Event-Handler für jede einzelne Tabellenzelle, sondern für die gesamte Tabelle (wenn diese eine ID hat, erleichtert das das Selektieren) – Event-Delegation.

Im JavaScript:

var myTable = document.getElementById('myTable');  
  
// Registrierung der Events  
myTable.addEventListener("mouseover", markSelectedClass, false);  
myTable.addEventListener("mouseout", unmarkSelectedClass, false);  
  
function markSelectedClass(e)  
{  
	var currentCell = e.target;  
	  
	while (currentCell.nodeName != 'TD') currentCell = currentCell.parentNode; // falls im td-Element noch andere Elemente sind  
	  
	myTable.className = "markClass" + currentCell.className;  
}  
  
function unmarkSelectedClass(e)  
{  
	myTable.className = null;  
}

Im Stylesheet:

.markClass1 .\31,  
.markClass2 .\32,  
.markClass3 .\33  
{  
	background: #99CCCC;  
}

Die Anpassungen des JavaScripts für ältere IEs übelass ich dir. window.event und e.srcElement an verlinkter Stelle, [link:http://molily.de/js/event-handling-fortgeschritten.html#microsoft@title=attachEvent] ebenfalls bei molily.

Qapla'