Machen <tr> zu handeln wie <a>

Question

Ich habe eine Tabelle und ich möchte jede Zeile anklickbar sein. Gerade jetzt, ich mache das einfach:

$('tr').click(...) 

Das funktioniert in den meisten Fällen aber wie kann ich es wie ein Link auf diese Weise handeln machen:

• Umschalt-Klick öffnet das Ziel in ein neues Fenster
• Mittelklick öffnet sich das Ziel in einem neuen Tab
• Schweben zeigt die Link-Adresse in der Statusleiste

Answer 1

Das ist in einigen Browsern technisch machbar, aber nicht in allen, und für diejenigen, die es unterstützen, ist das eine Menge Arbeit. Sie müssen die Tastatur und nicht-linke Klickereignisse abfangen. Sie wären wahrscheinlich besser dran, wenn Sie den Inhalt jedes TD in einem regulären A-Tag verpacken.

Die JS/Override-Route wird auch nicht grade degradiert ... wenn Sie nur eine andere Seite verlinken, wie eine typische HREF, ist es fast albern, das von JavaScript abhängig zu machen.

Answer 2

Eine Option wäre die Implementierung von .mouseUp() und die manuelle Erkennung der Tasten shift und ctrl, und welche Taste gedrückt wurde. Das klingt natürlich anfällig für alle möglichen hässlichen Fehler, bei denen Sie die Eigenart eines einzelnen Benutzers verpassen.

Stattdessen, wie wäre es automatisch ein <a> Tag zu jeder Zelle hinzufügen, die das tut, was Sie wollen. In jQuery, das ist einfach:

$('tr th, tr td').wrapInner('<a href="..."></a>').children('a').click(function() { 
    ... 
}); 

Answer 3

Ich glaube, Sie es einen Link machen müssen, indem es tatsächlich in einem <einen> Tag umschließt, so ‚schwebt‘ die Link-Adresse in der Statusleiste angezeigt.

Das Verhalten von Rechts- und Mittelklick hängt sicherlich von der Browserkonfiguration ab.

Answer 4

Ich würde vorschlagen, einen <a>-Tag in jeder Zelle mit:

<table> 
<tr> 
    <td><a href="...">...</a></td> 
    <td><a href="...">...</a></td> 
    <td><a href="...">...</a></td> 
</tr> 
</table> 

Mit diesem CSS:

table.clickRows td > a { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 

Answer 5

Sie sind viel besser dran versuchen, ein <a> aussehen wie ein <tr> zu machen.

Browser sind viel toleranter gegenüber Ihnen die Darstellung eines <a> Elements als Überschreiben solcher grundlegenden Operationen wie Shift-Klick auf einen Link.

Answer 6

Für was es wert ist, sind Apple ROT und Bananen sind GELB. Sie möchten vielleicht nicht quetschen und es für die gesunden Benutzer da draußen färben.

Ein Anker-Tag, <a> existiert für was es wert ist, und so ist eine Tabelle Zeile Tag, <tr>.