nicht angemeldet
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
--
[Jlog](http://jeenaparadies.net/webdesign/jlog/) | [Gourmetica Mentiri](http://jeenaparadies.net/gourmetica-mentiri/)
Matthias Apsel
Gunnar Bittersmann