Sehr lange und umfangreiche Tabellen können am Bildschirm schnell unübersichtlich werden. Insbesondere wenn der Tabellenkopf aus dem Sichtbereich hinaus gescrollt wird. Hier ist es wünschenswert, Tabellenspalten zu markieren.
Ausgangsbasis war bei mir eine Tabelle, welche alternierend weiße und graue Zeilen hat. Die Spalten gehören jeweils einer Class an; col1, col2, col3 u.s.w.
<td class='col1'>..</td><td class='col2'> ... u.s.w. <td class='col1'>..</td><td class='col2'> ... u.s.w. <td class='col1'>..</td><td class='col2'> ... u.s.w.
In den Tabellen-Headerzeilen werden dann per Eventhandler das entsprechende JavaScript aufgerufen; onClick die farbliche Markierung und onDblClick die Farbgebung wie sie unmarkiert aussieht. Die Beispiele sind einer echten Lösung entnommen:
<th onClick="markColumn('col1', '#e8f9b5', '#d3f960')" onDblClick="markColumn('col1', 'white', '#e3e3e3')"> <th onClick="markColumn('col2', '#e8f9b5', '#d3f960')" onDblClick="markColumn('col2', 'white', '#e3e3e3')">
Und nun das Script:
function markColumn(name, hell, dunkel){
elements=document.getElementsByClassName(name);
for(var i=0; i<elements.length; i++) {
if (i%2==0) elements[i].style.backgroundColor = hell;
else elements[i].style.backgroundColor = dunkel;
}
}
Durch einfaches Klick auf die Headerzeile wird so eine Tabelle markiert und durch Doppelklick wird die Markierung wieder entfernt.
Möglicherweise kann man das auch mit jquery einfacher realisieren. Aber dies läuft nun und ich habe keinen Bedarf für eine andere Lösung.
Noch ein Test mit PHP:
print "this";