Hallo,
Gibts andere Möglichkeiten, das hinzubekommen?
zB mit JavaScript? Ich kann zwar selbst keines schreiben, aber ich verwende eines auf der Seite.
Ja, ich hab hier mal die Einzelschritte beschrieben:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" charset="utf-8">
[code lang=javascript]// Hier iniziiern wir das ganze, d.h. wir gehen jede einzelne zelle der Tabelle durch
// und geben ihr bei onmouseover die funktion die ausgeführt werden muss wenn man
// mit der Maus drüber geht und bei onmouseout die funktion die ausgeführt
// werden soll wenn die Maus nicht mehr drüber ist.
function initColHover() {
var table = document.getElementById("t");
for (var i=0; i < table.getElementsByTagName("td").length; i++) {
table.getElementsByTagName("td")[i].onmouseover = colHover;
table.getElementsByTagName("td")[i].onmouseout = colHoverOut;
}
}
// Beim hovern kalkulieren wir erst mal in welcher Spalte das td ist über dem wir
// mit der Maus drüber sind um dann auf allen tds in der Spalte die Klasse "hover"
// zu setzen.
function colHover(e) {
var td = e.target;
setClassOnTdIndex("hover", getIndex(td));
}
// Beim enthovern (oder wie man das nennen möchte wenn die Maus nicht mehr über dem
// td ist), schauen wir auch wieder in welcher Spalte das td war und machen dann
// bei allen tds in dieser spalte das class-Attribut leer und entziehen ihm dadurch
// die Klasse "hover".
function colHoverOut(e) {
var td = e.target;
setClassOnTdIndex("", getIndex(td));
}
// Um zu kalkulieren über welcher Spalte die Maus gerade ist gehen wir erst einmal
// zum Elternelement (parentNode) des td, holen uns alle dessen tds und zählen in
// einer Schleife hoch bis wir das td gefunden haben. Danach geben wir einfach
// unsere zählvariable zurück, denn das ist auch gleichzeitig die Position der Spalte.
function getIndex(td) {
for (var i=0; i < td.parentNode.getElementsByTagName("td").length; i++) {
if (td.parentNode.getElementsByTagName("td")[i] == td) {
return i;
}
}
}
// Um bei allen tds in einer Spalte die klasse zu verändern holen wir uns erst einmal
// alle trs der Tabelle, laufen sie in einer Schleife durch, holen uns bei jedem
// Durchlauf alle tds des jeweiligen tr und setzen die klasse für das jeweilige
// td an der index position die wir vorher kalkuliert haben.
function setClassOnTdIndex(c, index) {
var table = document.getElementById("t");
var trs = table.getElementsByTagName("tr");
for (var i=0; i < trs.length; i++) {
trs[i].getElementsByTagName("td")[index].className = c;
}
}
// Wenn die komplette Seite geladen ist dann rufen wir unsere Initialisierungsmethode
// auf. (Allerdings gibt es wenn man mehrere Scripte benutzt auch bessere Alternativen
// dazu, z.b. http://simonwillison.net/2004/may/26/addloadevent/ aber für den Anfang
// reicht das erst einmal)
window.onload = initColHover;
</script>
<style type="text/css" media="screen">
~~~css
.hover { background: green; }
table { border: 1px solid #aaa; border-width: 1px 1px 0 0; border-collapse: collapse; }
td { width: 50px; text-align: center; border: 1px solid #aaa; border-width: 0 0 1px 1px; }
</style>
</head>
<body>
<table id="t">
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
<tr><td>a</td><td>b</td><td>c</td><td>d</td><td>e</td></tr>
</table>
</body>
</html>[/code]
Jeena
![](http://jeenaparadies.net/pavatar.png)
--
[Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)