MouseOver in Tabellenspalte

[Frank Theaker]

Juju,

ich habe eine Tabelle mit Daten aus einer Datenbank aufgebaut. Nun möchte ich, dass die gesamte Zeile als Link anklickbar ist.

Momentan sieht das so aus:

<table>
 <tr>
  <a href="linkA">
   <td>dat1</td>
   <td>dat2</td>
   <td>dat3</td>
  </a>
 </tr>
 <tr>
  <a href="linkB">
   <td>dat1</td>
   <td>dat2</td>
   <td>dat3</td>
  </a>
 </tr>
 <tr>
  <a href="linkC">
   <td>dat1</td>
   <td>dat2</td>
   <td>dat3</td>
  </a>
 </tr>
</table>

Soweit so gut. Der Link funktioniert. Nur stören mich zwei Dinge:

1. der Cursor zeigt keinen Link an, wenn er sich innerhalb der Spalte befindet, wenn ich klicke wird der Link aber ordnungsgemäß ausgeführt

2. ich würde gerne den "MouseOver-Effekt" nutzen und die Hintergrundfarbe der gesamten Zeile ändern, wenn ich mit der Maus in die Zeile gehe.

Ich habe schon einige Stunden getüfftelt, bekomme das aber so nicht hin. Kann mir da jemand helfen?

[Mathias Brodala]

Hallo Frank.

Juju,

ich habe eine Tabelle mit Daten aus einer Datenbank aufgebaut. Nun möchte ich, dass die gesamte Zeile als Link anklickbar ist.

Momentan sieht das so aus:

Und dieser momentane Zustand ist fehlerhaft.

<table>

<tr>
  <a href="linkA">
   <td>dat1</td>
   <td>dat2</td>
   <td>dat3</td>
  </a>
</tr>
<!-- … -->
</table>

  
Weder darf das a-Element direkt ein Kindelement des tr-Elementes sein, noch darf das a-Element td-Elemente enthalten.  
  
Dir bleibt keine andere Wahl, als die Struktur wie folgt aufzubauen:  
  
~~~html
<table>  
  <tr>  
    <td><a href="linkA">dat1</a></td>  
    <td><a href="linkA">dat2</a></td>  
    <td><a href="linkA">dat3</a></td>  
  </tr>  
<!-- … -->  
</table>

Da deine Struktur ja sowieso automatisch generiert wird, dürfte diese Änderung keine große Hürde darstellen.

Soweit so gut. Der Link funktioniert. Nur stören mich zwei Dinge:

1. der Cursor zeigt keinen Link an, wenn er sich innerhalb der Spalte befindet, wenn ich klicke wird der Link aber ordnungsgemäß ausgeführt

Das dürfte aus der fehlerhaften Struktur resultieren, deren Auswirkungen nicht abgeschätzt werden können.

2. ich würde gerne den "MouseOver-Effekt" nutzen und die Hintergrundfarbe der gesamten Zeile ändern, wenn ich mit der Maus in die Zeile gehe.

Dann setze diesen Hover-Effekt entweder für die jeweilige Tabellenzeile (trhttp://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover) oder arbeite hierfür mit JavaScript.

Für letzteres kannst du dir <http://de.selfhtml.org/javascript/objekte/document.htm@title=je nach Fasson> eine Referenz auf die jeweilige Tabelle holen, deren rows-Knotenliste durchlaufen und für jede Tabellenzeile eine Änderung beim http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=onmouseover- und beim http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseout@title=onmouseout-Event festlegen. Diese Änderung kann entweder direkt eine Formatierung mit Hilfe des http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objektes oder, etwas flexibler, eine http://de.selfhtml.org/javascript/objekte/all.htm#class_name@title=Klassenzuweisung (ignoriere am besten, dass sich das Beispiel auf document.all bezieht) sein.

Einen schönen Freitag noch.

Gruß, Mathias

[Frank Theaker]

Und dieser momentane Zustand ist fehlerhaft.
Weder darf das a-Element direkt ein Kindelement des tr-Elementes sein, noch darf das a-Element td-Elemente enthalten.
Dir bleibt keine andere Wahl, als die Struktur wie folgt aufzubauen:
Da deine Struktur ja sowieso automatisch generiert wird, dürfte diese Änderung keine große Hürde darstellen.

Nun gut, das sehe ich sogar ein :-)

2. ich würde gerne den "MouseOver-Effekt" nutzen und die Hintergrundfarbe der gesamten Zeile ändern, wenn ich mit der Maus in die Zeile gehe.

Dann setze diesen Hover-Effekt entweder für die jeweilige Tabellenzeile (trhttp://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active@title=:hover) oder arbeite hierfür mit JavaScript.

Für letzteres kannst du dir <http://de.selfhtml.org/javascript/objekte/document.htm@title=je nach Fasson> eine Referenz auf die jeweilige Tabelle holen, deren rows-Knotenliste durchlaufen und für jede Tabellenzeile eine Änderung beim http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=onmouseover- und beim http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseout@title=onmouseout-Event festlegen. Diese Änderung kann entweder direkt eine Formatierung mit Hilfe des http://de.selfhtml.org/javascript/objekte/style.htm@title=style-Objektes oder, etwas flexibler, eine http://de.selfhtml.org/javascript/objekte/all.htm#class_name@title=Klassenzuweisung (ignoriere am besten, dass sich das Beispiel auf document.all bezieht) sein.

Könntest Du da ein kleines Beispiel nennen? Würde mir bestimmt deutlich leichter fallen :-)

[Mathias Brodala]

Hallo Frank.

2. ich würde gerne den "MouseOver-Effekt" nutzen und die Hintergrundfarbe der gesamten Zeile ändern, wenn ich mit der Maus in die Zeile gehe.

Dann setze diesen Hover-Effekt […] mit JavaScript [um].

Könntest Du da ein kleines Beispiel nennen? Würde mir bestimmt deutlich leichter fallen :-)

Kein Problem. Das CSS:

.hovered {  
  background:#069;  
}

Das JavaScript:

// Erst nach dem Laden kann auf Elemente im Dokument zugegriffen werden  
window.onload = function() {  
  
  // Erste Tabelle im Dokument  
  var table = document.getElementsByTagName('table')[0];  
  
  // Alle Zeilen dieser Tabelle durchlaufen  
  for (var i = 0; i < table.rows.length; ++i) {  
  
    // Funktion für onmouseover-Event festlegen  
    table.rows[i].onmouseover = function() {  
  
      // Tabellenzeile der Klasse „hovered“ hinzufügen  
      this.className = 'hovered';  
    };  
  
    // Funktion für onmouseout-Event festlegen  
    table.rows[i].onmouseout = function() {  
  
      // Klassenzugehörigkeit der Tabellenzeile löschen  
      this.className = '';  
    };  
  }  
};

Einen schönen Samstag noch.

Gruß, Mathias