nicht angemeldet
Hallo,
Zur besseren Navigation in der Tabelle möchte ich die jeweilige Zeile und Spalte unter dem Mauszeiger farbig hervorheben. Mit der Zeile ist das kein mit CSS und tr.normal {background-color:#FFFFFF}; kein Problem. Wie könnte ich soetwas mit der Spalte realsieren?
Eine Lösungsmöglichkeit wäre, alle TD-nodes in der Tabelle in einem JavaScript-Object zu sammeln, deren omouseover und onmouseout Eigenschaften zu setzen und dann auszuwerten.
Diskussionsgrundlage:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Tabelle mit hover</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
<!--
th, td {width:100px;}
-->
</style>
<script type="text/javascript">
<!--
var rows = null;
var cells = new Object();
function getMyTable() {
var tab = document.getElementById("myTable");
rows = tab.getElementsByTagName("TR");
cells["c0"] = new Array();
cells["c1"] = new Array();
cells["c2"] = new Array();
cells["c3"] = new Array();
for (var i=1; i<rows.length; i++) {
cells["c0"][i] = rows[i].getElementsByTagName("TD")[0];
cells["c0"][i].row = i;
cells["c0"][i].col = 0;
cells["c0"][i].onmouseover = function() {crossoverOver(this)};
cells["c0"][i].onmouseout = function() {crossoverOut(this)};
cells["c1"][i] = rows[i].getElementsByTagName("TD")[1];
cells["c1"][i].row = i;
cells["c1"][i].col = 1;
cells["c1"][i].onmouseover = function() {crossoverOver(this)};
cells["c1"][i].onmouseout = function() {crossoverOut(this)};
cells["c2"][i] = rows[i].getElementsByTagName("TD")[2];
cells["c2"][i].row = i;
cells["c2"][i].col = 2;
cells["c2"][i].onmouseover = function() {crossoverOver(this)};
cells["c2"][i].onmouseout = function() {crossoverOut(this)};
cells["c3"][i] = rows[i].getElementsByTagName("TD")[3];
cells["c3"][i].row = i;
cells["c3"][i].col = 3;
cells["c3"][i].onmouseover = function() {crossoverOver(this)};
cells["c3"][i].onmouseout = function() {crossoverOut(this)};
}
}
function crossoverOver(obj) {
var r = obj.row;
var c = obj.col;
for (var i=1; i<rows.length; i++) {
cells["c"+c][i].style.backgroundColor="red";
}
for (var i=0; i<4; i++) {
cells["c"+i][r].style.backgroundColor="red";
}
}
function crossoverOut(obj) {
var r = obj.row;
var c = obj.col;
for (var i=1; i<rows.length; i++) {
cells["c"+c][i].style.backgroundColor="transparent";
}
for (var i=0; i<4; i++) {
cells["c"+i][r].style.backgroundColor="transparent";
}
}
//-->
</script>
</head>
<body onload="getMyTable();">
<table border="1" id="myTable">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
viele Grüße
Axel