Zeilen, Spalten hervorheben beim Überfahren mit der Maus

[Gunnar Bittersmann]

@@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.