✔ onmouseover -> aktive <tr> hell, <td> dunkel wie?

K

kloppo

Grünschnabel
Ich hab ne HTML Tabelle und will dass die Zeile in der man gerade ist hellgrau und die Zelle in der man ist zusätzlich dunkelgrau ist!
Beim Verlassen der Zeile soll diese natürlich wieder weiss werden, beim Verlassen der Zelle je nachdem weiss(wenn auch Zeile verlassen wird) oder hellgrau (wenn mauszeiger in Zeile bleibt).

Dachte eigentlich zunächst ich kriege das einfach mit mouseover und mouseout Befehlen in den <tr>s und <td>s hin, aber die Tabelle will nicht so wie ich will :-(

Bitte helft einem js newb!
greetz kloppo
 
Hi,

eine einfache Lösung könnte so aussehen:
HTML: 
<script language="JavaScript" type="text/javascript">
var cols = 3; // Anzahl der Spalten

function highlight(col) {
    var colID = col.id;
    var row = colID.substr(0, 1);
    for (var i=1; i<=cols; i++) {
        var c = document.getElementById(row + "col" + i);
        c.style.backgroundColor = "#DDDDDD";
    }
    col.style.backgroundColor = "#AAAAAA";
}
function delight(col) {
    var colID = col.id;
    var row = colID.substr(0, 1);
    for (var i=1; i<=cols; i++) {
        var c = document.getElementById(row + "col" + i);
        c.style.backgroundColor = "#FFFFFF";
    }
}
</script>
<body>
<table width="250" border="1">
<tr>
<td id="1col1" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
<td id="1col2" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
<td id="1col3" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
</tr>
<tr>
<td id="2col1" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
<td id="2col2" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
<td id="2col3" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
</tr>
<tr>
<td id="3col1" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
<td id="3col2" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
<td id="3col3" bgcolor="#FFFFFF" onMouseOver="highlight(this)" onMouseOut="delight(this)">&nbsp;</td>
</tr>
</table>
</body>
Das geht sicher eleganter, indem ich Farben für die ganze Reihe festlege, oder die Anzahl der Spalten selbst auslese, aber ich habe grade keine Referenz vor der Nase und leider nicht alles im Kopf. ;)

Gruß
.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück