Zeilen, Spalten hervorheben beim Überfahren mit der Maus

[hotti]

hi,

da hab ich malne Tabelle gemacht, wo beim Überfahren einer Tageszelle mit der Maus das Datum und die Kalenderwoche per title-Attribut angezeigt wird.

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.

Hotte

[LX]

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

[Tim Tepaße]

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

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

[dedlfix]

echo $begrüßung;

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?

Etwas Kommentierung des Codes käme dem Verständnis zugute.

if (window.addEventListener) window.addEventListener("mouseover", highlight, false);
else if (document.attachEvent) document.attachEvent("onmouseover", highlightIE);

Man erkennt, dass das eine Browserweiche sein soll am IE des Funktionsnamens, wenn man weiß, dass Browserweichen nötig sind. Ist das Allgemeinwissen auch unter Anfängern?

var hoveredRow = target.parentNode;
  var tbody = hoveredRow.parentNode;
  var table = tbody.parentNode;

Wozu brauchst du den tbody als Variable? Ein

var table = hoveredRow.parentNode.parentNode; // tbody überspringen

wäre ebenso verständlich und ressourcenschonender. Im Grunde braucht es nicht einmal eine Variable table, denn darauf greifst du zumindest in dieser Funktion nur einmal zu und könntest dort gleich hoveredRow.parentNode.parentNode notieren.

for (var childNode = target, hoveredColNo = -1; childNode = childNode.previousSibling;)

Das ist ja eine ganz gemeine Geschichte. Man erwartet ja im zweiten Teil die Abbruchbedingung. Deshalb las mein Unterbewusstsein erst einmal == statt = und wunderte sich über das fehlende Weiterschalten im dritten Teil. Dass hier Abbruchbedingung und Weiterschaltung in einem notiert ist gehört kommentiert, finde ich.

if (childNode.nodeType == 3) hoveredColNo++;

Mut zur Lücke oder warum zählst du hier Textnodes? Kein Wunder, dass du mit -1 anfangen musst, denn es gibt einen Whitespace mehr als <td>s. Außerdem gibt es die nur in deinem Beispiel. In der Originalaufgabe stehen die Zellen lückenlos hintereinander.

echo "$verabschiedung $name";

[Gunnar Bittersmann]

@@dedlfix:

Man erkennt, dass das eine Browserweiche sein soll am IE des Funktionsnamens, wenn man weiß, dass Browserweichen nötig sind. Ist das Allgemeinwissen auch unter Anfängern?

Anfängern würde ich keinen fertigen Code posten.

Im Grunde braucht es nicht einmal eine Variable table, denn darauf greifst du zumindest in dieser Funktion nur einmal zu und könntest dort gleich hoveredRow.parentNode.parentNode notieren.

Ja, etwas Optimierung in Bezug auf Performance ist da noch drin. Andererseits macht das den Code weniger gut lesbar; und du beklagst doch schon, dass er jetzt schon nicht gut lesbar sei.

for (var childNode = target, hoveredColNo = -1; childNode = childNode.previousSibling;)

Das ist ja eine ganz gemeine Geschichte.

Ach was. ;-)

Dass hier Abbruchbedingung und Weiterschaltung in einem notiert ist gehört kommentiert, finde ich.

Oder man gewöhnt sich dran, dass man mit for-Schleifen nicht nur stupide Zähler hoch- und runtersetzen kann.

if (childNode.nodeType == 3) hoveredColNo++;

Mut zur Lücke oder warum zählst du hier Textnodes?

Argl, ich hätte doch nochmal http://de.selfhtml.org/javascript/objekte/node.htm#node_type@title=nachlesen sollen. Ich wollte nicht die Textknoten (3), sondern die Elementknoten (1) zählen. Das erklärt wohl auch den anderen Startwert in der IE-Funktion.

Berichtigung:

  for (var childNode = target, hoveredColNo = 0; childNode = childNode.previousSibling;)  
  {  
   if (childNode.nodeType == 1) hoveredColNo++;  
  }

Live long and prosper,
Gunnar

[hotti]

Moin,

wieder mal was Neues lernen. Warum nicht :)

Schönen Sonntag Euch!

Hotte

[Struppi]

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.

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

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

cool Struppi, danke!!!!!

Gerade eben hab ich meine eigenwillige und starrköpfige Lösung fertiggestellt und Online gebracht: Ein Jahr im Querformat.

Meine Frau findet Deine Variante aber auch gut.

Viele Grüße,
Horst Haselhuhn

[hotti]

Mist,

.de vergessen.

Online ist hier:

Ein Jahr im Querformat.