Autor Thema: Ganze Tabellenzeilen verlinken - geht das?  (Gelesen 12338 mal)

Offline Poster

  • Freigeschaltet
  • Bronze Member
  • *****
  • Beiträge: 2031
Ganze Tabellenzeilen verlinken - geht das?
« am: 20. Januar 2010, 13:21:04 »
Habe eine große Tabelle in der die <tr> mit einem CSS-Hover-effekt versehen sind, zur besseren Orientierung.
Nun hatte ich mir gedacht, um die Benutzerfreundlichkeit zu erhöhen, diese komplette Tabellenzeile (nicht Zelle) mit einem Link zur entsprechenden Unterseite zu versehen.
Habe gestern stundenlang gegoogelt und nichts wirkliches gefunden.

Einzig eine Javascript-Variante fand ich.
<tr onclick="window.location.href='.....'">Aber ich möchte nicht gerne Javascript einsetzen.

Aber irgendwie sieht das schlecht aus, da die TR-Attribute nichts wirkliches hergeben.

Gibt es eine andere Möglichkeit mit PHP oder CSS?

LG vom Poster
(http://bot-trap.de/tmimg/bttop1-11-08.gif)

Offline fruli

  • Freigeschaltet
  • Sr. Member
  • *****
  • Beiträge: 570
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #1 am: 20. Januar 2010, 13:36:49 »
Mit jQuery kannst du eigentlich jedem DOM-Element ein click-Event zuweisen. Ungefähr so: ;)

<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript" ></script>
<script type="text/javascript" >
  $(document).ready(function() {
    $('tr#row1').click(function(event) {
      window.location.href = 'http://www.google.de';
    });
  });
</script>
<table>
  <tr id="row1">
    <td>Ich bin eine klickbare Tabellenzeile</td>
  </tr>
</table>


Offline Poster

  • Freigeschaltet
  • Bronze Member
  • *****
  • Beiträge: 2031
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #2 am: 20. Januar 2010, 13:52:20 »
Vielen Dank fruli,
hm, aber irgendwie ist dass doch auch Javascript, so wie es aus sieht.
Das wollte ich vermeiden, da ein Drittel meiner Besucher Javascript ausgeschaltet haben.

LG vom Poster
(http://bot-trap.de/tmimg/bttop1-11-08.gif)

Offline fruli

  • Freigeschaltet
  • Sr. Member
  • *****
  • Beiträge: 570
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #3 am: 20. Januar 2010, 14:09:38 »
Ein anderer Weg ist mir da leider auch nicht bekannt.

Offline Stephan-Zoellner

  • Freigeschaltet
  • Bronze Member
  • *****
  • Beiträge: 2072
  • auf den ältesten Bildern sieht man am jüngsten aus
    • Alles Rund um solide Bibelarbeit
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #4 am: 20. Januar 2010, 20:18:44 »
Es geht schon, aber eben nur auf dem Weg jede ZELLE der Zeile mit dem entsprechenden Link zu versehen.
Wenn das CSS dann so eingestellt ist, daß der "hover" die ganze Zeile "highlitet" merkt der Besucher den Unterschied zu den JS Sachen garnicht - außer daß es eben pures HTML und CSS ist und ohne JS funktioniert:

<table>
  <tr id="row1">
    <td><a class="zeile_n" href="link">klickbare Zelle 1</a></td>
    <td><a class="zeile_n" href="link">klickbare Zelle 2</a></td>
    <td><a class="zeile_n" href="link">klickbare Zelle 3</a></td>
  </tr>
</table>

Die CSS-Eigenschaften müssen dan natürlich entsprechend gesetzt werden.
Im dümmsten Fall wird dann nur die ZELLE "geheighlightet" und nicht die Zeile.
Wenn es klappt die ZEILE zu aktivieren kann dann aber trotzdem nur beim Klick auf die einzelne Zelle der Link aufgerufen werden.
Die Formatierungen sollten darum so gewählt werden, daß die Zellen gemeinsam agieren ...

dürfte etwas tüftel-Arbeit sein ...
maranatha Stephan Zöllner

Bibelarbeit.info

Offline dietmarh

  • Problemfall
  • Bronze Member
  • ****
  • Beiträge: 1325
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #5 am: 20. Januar 2010, 21:36:12 »
Wenn man auf den verblödeten IE6 pfeift, ist das kein Problem. Alle aktuellen Browser können auf beliebigen Elementen hovern. Man kann also ohne Probleme mit tr:hover die gesamte Zeile färben.

Wenn darin aber tatsächlich funktionierende Links sein sollen und nicht bloß Platzhalter, damit auch der IE6 wenigstens irgendwas anzeigt, muß man sie mit display:block; width und height dazu bringen, die Tabellenzellen komplett auszufüllen, sonst paßt die optische Anzeige nicht zur Funktion (Zeile highlightet, reagiert aber bei Klick neben den verlinkten Text nicht).

Offline Stephan-Zoellner

  • Freigeschaltet
  • Bronze Member
  • *****
  • Beiträge: 2072
  • auf den ältesten Bildern sieht man am jüngsten aus
    • Alles Rund um solide Bibelarbeit
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #6 am: 20. Januar 2010, 22:44:15 »
Zeile highlightet, reagiert aber bei Klick neben den verlinkten Text nicht.

Ich habe ganau soetwas befürchtet! Weißt Du ob der IE7-Patch von Dean-Edwards das Problem beheben kann?
Das ist zwar für Poster dann nicht DIE Lösung, aber immerhin ein Schritt in diese Richtung.
maranatha Stephan Zöllner

Bibelarbeit.info

Offline dietmarh

  • Problemfall
  • Bronze Member
  • ****
  • Beiträge: 1325
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #7 am: 21. Januar 2010, 00:44:52 »
Zeile highlightet, reagiert aber bei Klick neben den verlinkten Text nicht.

Ich habe ganau soetwas befürchtet! Weißt Du ob der IE7-Patch von Dean-Edwards das Problem beheben kann?
Das ist kein Problem, sondern genau das eingestellte Verhalten. a ist nun mal ein Inline Element und nimmt ohne weitere Einstellungen genau den Platz ein, den sein Text benötigt. Wenn man das :hover nur auf das a setzen würde, wäre zwar das Verhalten schlüssig, aber dann würde nicht die gesamte Zeile gehighlightet (geniales Wort  ;D ), nicht einmal die komplette Zelle, sondern nur der Text.

Um das zu verhindern, muß man die Abmessungen der a an das Highlighting anpassen. Da man Inline Elementen keine Abmessungen zuweisen kann, ist das display:block; nötig.

Offline Stephan-Zoellner

  • Freigeschaltet
  • Bronze Member
  • *****
  • Beiträge: 2072
  • auf den ältesten Bildern sieht man am jüngsten aus
    • Alles Rund um solide Bibelarbeit
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #8 am: 21. Januar 2010, 19:18:27 »
Netter "Aufstand" so eine Aktion :-)
Gut daß ich das jetzt weiß, aber genauso gut ist es daß ich das noch nie benötigt habe :-
maranatha Stephan Zöllner

Bibelarbeit.info

Offline dietmarh

  • Problemfall
  • Bronze Member
  • ****
  • Beiträge: 1325
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #9 am: 21. Januar 2010, 19:32:10 »
Netter "Aufstand" so eine Aktion :-)
Wenn man die Zusammenhänge kennt, hält er sich in Grenzen ;)
Die paar Zeilen hat man in ein wenigen Sekunden ins CSS getippt.

Offline Poster

  • Freigeschaltet
  • Bronze Member
  • *****
  • Beiträge: 2031
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #10 am: 21. Januar 2010, 20:28:27 »
@alle,
vielen Dank für Eure Antworten.
Bin zwar ein DAU was das Programmieren betrifft, aber mit CSS und in HTML bin ich ziemlich fit. Deshalb sind mir hover und display:block auch geläufig und ich kann damit gut umgehen.

Es geht schon, aber eben nur auf dem Weg jede ZELLE der Zeile mit dem entsprechenden Link zu versehen.
Wenn das CSS dann so eingestellt ist, daß der "hover" die ganze Zeile "highlitet" merkt der Besucher den Unterschied zu den JS Sachen garnicht - außer daß es eben pures HTML und CSS ist und ohne JS funktioniert:

@Stephan-Zoellner und @dietmarh,
vielen Dank für Eure Antworten.

Am Anfang schrieb ich ganz bewusst, dass es um die Verlinkung kompletter Tabellenzeilen (<tr>) geht und nicht um die Tabellenzellen (<td>).
Ich habe ja eine Tabelle in der in jeder Zeile ca. 20 Zellen (Spalten) sich befinden.
Bei 40 Zeilen a 20 Spalten müsste ich bei Eurer Methode ca. 800 Links setzen, das würde den Code aber mächtig aufblähen und das möchte ich natürlich nicht.

Ich habe aber bis jetzt keinen vernünftigen Ansatz ohne JavaScript gefunden.
Habe schon überlegt, ob ich deshalb die Tabelle mit dem CSS-Boxmodel umbaue und mit Listenelementen und <span> arbeite.
Schade, ich dachte es geht mit einem Trick doch noch, aber wahrscheinlich nicht. Sonst würde man ja auch etwas im Netz dazu finden.

Ein Sache hatte ich gefunden, konnte damit aber nichts anfangen, da ich nicht fit in PHP bin. Vielleicht könnt ihr Profis damit etwas anfangen und mir eventuell erklären.

Folgenden PHP-Code habe ich gefunden:
$("tr[link]").css("cursor","pointer");
      $("tr[link]").bind("click", function(){
            var link = $(this).attr("link");
            window.location.href = link;
      }); 

Dazu käme das HTML:<tr  link="/link-zur-detailseite.htm" ......>Ich bekomme aber eine Fehlermeldung,  wenn ich den Code bei mir einbaue.
Außerdem kenne ich das link-Attribute in TR garnicht. Oder ist das Ganze letztlich auch nur Javascript, was aus PHP erzeugt wird?
Bin gespannt auf Eure Antwort.

LG vom Poster
(http://bot-trap.de/tmimg/bttop1-11-08.gif)

Offline fruli

  • Freigeschaltet
  • Sr. Member
  • *****
  • Beiträge: 570
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #11 am: 21. Januar 2010, 20:45:11 »
Das ist kein php. Das ist javascript.

Offline dietmarh

  • Problemfall
  • Bronze Member
  • ****
  • Beiträge: 1325
Re: Ganze Tabellenzeilen verlinken - geht das?
« Antwort #12 am: 21. Januar 2010, 20:54:04 »
Am Anfang schrieb ich ganz bewusst, dass es um die Verlinkung kompletter Tabellenzeilen (<tr>) geht und nicht um die Tabellenzellen (<td>).
Es ist völlig egal, ob es um tr oder td geht. Du kannst beides nicht in a packen, sondern nur umgekehrt.

Zitat
Ich habe ja eine Tabelle in der in jeder Zeile ca. 20 Zellen (Spalten) sich befinden.
Bei 40 Zeilen a 20 Spalten müsste ich bei Eurer Methode ca. 800 Links setzen, das würde den Code aber mächtig aufblähen und das möchte ich natürlich nicht.
Das Leben ist hart, aber ungerecht :)
Einen anderen sauberen Weg gibt es aber nicht. Wenn du die Tabelle mit PHP in einer (verschachtelten?) Schleife ausgeben läßt, sollte es kein Problem sein, jedem einzelnen Text die Verlinkung hinzuzufügen.

Zitat
Ich habe aber bis jetzt keinen vernünftigen Ansatz ohne JavaScript gefunden.
Mit JS gibt es noch weniger vernünftige Lösungen. Besucher ohne JS können den Links nicht folgen, also auch keine Suchmaschinen. Um dieses Problem zu lösen, mußt du die ganze Sache noch einmal mit normalen Links in den noscript-Teil packen, und dann bist du genau da, wo du nicht hinwillst.

Zitat
Habe schon überlegt, ob ich deshalb die Tabelle mit dem CSS-Boxmodel umbaue und mit Listenelementen und <span> arbeite.
Und dann? Ich sehe gerade nicht den geringeren Aufwand.

Ein Sache hatte ich gefunden, konnte damit aber nichts anfangen, da ich nicht fit in PHP bin. Vielleicht könnt ihr Profis damit etwas anfangen und mir eventuell erklären.

Zitat
Folgenden PHP-Code habe ich gefunden:
$("tr[link]").css("cursor","pointer");
      $("tr[link]").bind("click", function(){
            var link = $(this).attr("link");
            window.location.href = link;
      }); 
Das ist kein PHP, sondern Javascript.

Zitat
Außerdem kenne ich das link-Attribute in TR garnicht. Oder ist das Ganze letztlich auch nur Javascript, was aus PHP erzeugt wird?
Nein, in diesem Format ist es ein Attribut und in tr nicht zulässig. Damit wird in body die Linkfarbe für unbesuchte Links definiert.