Die Zeile kannst Du bei allen CSS2-konformen Browsern (also alle außer IE) mittels :hover selektieren und die td-Elemente entsprechend einfärben.

Bei der Spalte (und beim IE) wirst Du um JavaScript nicht herumkommen.

Gruß, LX

Hallo,

Schöner wärs freilich, wenn sich dabei die Farbe der entsprechenden Zeile und Spalte auch noch ändert. Falls das irgendwie zu machen geht, gebt mir mal bitte nen Tip: wie.

Mit CSS nur für die Zelle mit td[link:http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover { background-color : ...; }.

Für ein „Fadenkreuz“ der zugehörigen Spalte und Zeile braucht man Javascript. Die Event-Handler onmouseover und onmouseout, um damit für td-Elemente festzustellen, dass der Mauszeiger darüber schwebt. Das Attribut parentNode von HTML-Elementen bringt das darüber liegende Element, d.h. die Spalte. Dieser könnte man eine Klasse vergeben, damit eine vorher bestehende CSS-Regel in Kraft tritt, die die Hintergrundfarbe ändert. Um an die zugehörige Spalte zu kommen empfiehlt sich entweder Arithmetik oder aber ein Referenzierungsmechanismus mittels erweiterter semantischer Auszeichnung. Ansonsten könnte man auch Klassen verwenden, um sich die Arithmetik, die ja Rücksicht auf row- und colspans nehmen muß zu ersparen. Auch hier geht die Aktivierung über das Anlegen von CSS-Klassen und vorher definierten Regeln. Wenn es mit dem Layout-Konzept übereinstimmt, könnte man auch <col>-Elemente und sich somit das http://www.w3.org/TR/CSS21/tables.html#table-layers@title?Ebenen-Konzept in CSS zu Nutze machen.

Tim

@@hotti:

Schöner wärs freilich, wenn sich dabei die Farbe der entsprechenden Zeile und Spalte auch noch ändert. Falls das irgendwie zu machen geht, gebt mir mal bitte nen Tip: wie.

Markup:

<table>  
 <colgroup>  
  <col/>  
  <col/>  
  <col/>  
 </colgroup>  
 <tbody>  
  <tr>  
   <td>11</td>  
   <td>12</td>  
   <td>13</td>  
  </tr>  
  <tr>  
   <td>21</td>  
   <td>22</td>  
   <td>23</td>  
  </tr>  
  <tr>  
   <td>31</td>  
   <td>32</td>  
   <td>33</td>  
  </tr>  
 </tbody>  
</table>

Stylesheet:

col.hovered,  
tr.hovered,  
tr:hover  
{  
 background: yellow;  
}

Script:

if (window.addEventListener) window.addEventListener("mouseover", highlight, false);  
else if (document.attachEvent) document.attachEvent("onmouseover", highlightIE);  
  
function highlight(event)  
{  
 var target = event.target;  
 if (target.nodeName.toLowerCase() == "td")  
 {  
  var hoveredRow = target.parentNode;  
  var tbody = hoveredRow.parentNode;  
  var table = tbody.parentNode;  
  
  for (var childNode = target, hoveredColNo = -1; childNode = childNode.previousSibling;)  
  {  
   if (childNode.nodeType == 3) hoveredColNo++;  
  }  
  
  var cols = table.getElementsByTagName("col");  
  for (var i = 0; i < cols.length; cols[i++].className = "");  
  cols[hoveredColNo].className = "hovered";  
 }  
};  
  
function highlightIE(event)  
{  
 var target = event.srcElement;  
 if (target.nodeName.toLowerCase() == "td")  
 {  
  var hoveredRow = target.parentNode;  
  var tbody = hoveredRow.parentNode;  
  var table = tbody.parentNode;  
  
  for (var childNode = target, hoveredColNo = 0; childNode = childNode.previousSibling; hoveredColNo++);  
  
  var cols = table.getElementsByTagName("col");  
  for (var i = 0; i < cols.length; cols[i++].className = "");  
  cols[hoveredColNo].className = "hovered";  
  
  var rows = table.getElementsByTagName("tr");  
  for (var i = 0; i < rows.length; i++)  
  {  
   rows[i].className = (rows[i] == hoveredRow ? "hovered" : "");  
  }  
 }  
};

Die Funktionen 'highlight' und 'highlightIE' unterscheiden sich in:

(1) im IE nicht 'event.target', sondern 'event.srcElement'

(2) <http://de.selfhtml.org/javascript/objekte/node.htm#child_nodes_whitespace@title=Da IE Whitespaces nicht als Kind-Textknoten im DOM hat>, ist die Abfrage 'if (childNode.nodeType == 3)' überflüssig.

Warum der Startwert im IE 'hoveredColNo = 0' und nicht wie in anderen Browser 'hoveredColNo = -1' sein muss, würde ich selbst gerne wissen.

Hat jemand eine Idee?

(3) Im IE wird auch für die gehoverte Zeile eine Klasse gesetzt, weil der 6er den CSS-Selektor 'tr:hover' nicht versteht.

Live long and prosper,
Gunnar

PS: Nicht getestet im IE 7.

Moin,

wieder mal was Neues lernen. Warum nicht :)

Schönen Sonntag Euch!

Hotte

Schöner wärs freilich, wenn sich dabei die Farbe der entsprechenden Zeile und Spalte auch noch ändert. Falls das irgendwie zu machen geht, gebt mir mal bitte nen Tip: wie.

Du meinst so http://selfhtml.jstruebig.de/year.html?
Das Skript ist ganz unten vor dem schliessenden Body Tag

Struppi.