Farbe der Tabellenzeile bei Mouseover und -out ändern

Aus Gründen der besseren Lesbarkeit ist es sinnvoll, dass sich Tabellenzeilen bei Berührung mit der Maus in ihrer Farbe ändern. Beim Verlassen der Tabellenzeile soll natürlich wieder die ursprüngliche Farbe hergestellt werden.

Dies lässt sich mit etwas JavaScript umsetzen.

Im HTML Tag für die Zeile <tr> wird zuerst die Grundfarbe festgelegt:

<tr bgcolor="#E1E1E1">

Anschließend wird per JavaScript für die Zeile festgelegt, was beim Berühren und beim Verlassen der Zeile an Farbänderungen erfolgen soll. Hierzu werden die Funktionen onMouseOver und onMouseOut verwendet. Durch this.bgColor werden die Farbänderungen zugewiesen:

<tr bgcolor="#E1E1E1" onMouseOver="this.bgColor='#CCCCFF'" onMouseOut="this.bgColor='#E1E1E1'">

Beispiel (mit der Maus über die Zeilen fahren):

Spalte 1 Spalte2
Zeile 1 Text 1 Zeile 1 Text 2
Zeile 2 Text 1 Zeile 2 Text 2
Zeile 3 Text 1 Zeile 3 Text 2

Die oben genannten Festlegungen müssen für jede einzelne Zeile vorgenommen werden. Es besteht dadurch auch die Möglichkeit, für jede Zeile eine andere Farbänderung vorzunehmen.

Diese Methode ist zur Zeit noch HTML konform. Demnächst wird jedoch bgcolor nicht mehr HTML Standard sein, da es von der W3C als deprecated eingestuft ist.