html - Tabellenzeile wie ein Link


101

Ich kann meine Tabellenzeile nicht als Link zu etwas festlegen. Ich kann nur CSS und HTML verwenden. Ich habe verschiedene Dinge ausprobiert, von Div in Reihe bis zu etwas anderem, aber ich kann es immer noch nicht zum Laufen bringen.

Antworten:


175

Sie haben zwei Möglichkeiten, dies zu tun:

  • Verwenden von Javascript:

    <tr onclick="document.location = 'links.html';">

  • Anker verwenden:

    <tr><td><a href="">text</a></td><td><a href="">text</a></td></tr>

Ich habe die zweite Arbeit gemacht mit:

table tr td a {
    display:block;
    height:100%;
    width:100%;
}

So entfernen Sie den Totraum zwischen den Spalten:

table tr td {
    padding-left: 0;
    padding-right: 0;
}

Hier ist eine einfache Demo des zweiten Beispiels: DEMO


8
Da OP "nur CSS und HTML" sagte, gehe ich davon aus, dass die Annahme für die zweite Antwort war. Beachten Sie, dass Sie eine Lücke zwischen den Tabellenzellen erhalten, wenn Sie keinen Rand = 0 haben.
System PAUSE

1
IIRC Die Tabellenzellen müssen nur reduziert werden, können aber einen Rand haben.
Esteban Küber

5
Das <a> -Tag lässt keine anderen HTML-Elemente darin zu. Wie können wir dann eine ganze Tabellenzeile verknüpfen, die mehr Tabellendaten enthält? So etwas in der Art: <tr> <a href=""> <td> Text </ td> <td> ..... </a> </ tr> .. Wir können das ne nicht mögen?
Abimaran Kugathasan

4
Ich würde empfehlen, "display: inline-block" anstelle von block zu verwenden. Bei der Blockanzeige stellte ich fest, dass Chrome die "Höhe: 100%" ignorierte und nicht die gesamte Höhe des <td> klickbar machte, wenn andere Elemente in derselben Zeile eine größere Höhe haben. Durch das Erstellen eines Inline-Blocks wurde dieses Problem behoben und möglicherweise auch ein Problem damit, dass Text in den Tabellenelementen abgeschnitten wird.
9.

2
Anker hat noch Totraum zwischen Spalten (getestet mit Google Chrome Version 40.0.2214.115 m)
Yuri

55

Ich habe mir eine benutzerdefinierte Abfragefunktion gemacht:

Html

<tr data-href="site.com/whatever">

jQuery

$('tr[data-href]').on("click", function() {
    document.location = $(this).data('href');
});

Einfach und perfekt für mich. Hoffentlich hilft es dir.

(Ich weiß, dass OP nur CSS und HTML möchte, aber jQuery in Betracht ziehen)

Bearbeiten

Einverstanden mit Matt Kantor unter Verwendung von Daten attr. Antwort oben bearbeitet


Das ist eigentlich ziemlich elegant. Ich frage mich, ob es nach w3c-Standards als ungültiges HTML angesehen wird.
Mahn

14
Ich würde verwenden data-hrefoder so.
Matt Kantor

2
JSFiddle Link führt zu 404.
Flox

1
Klasse hinzufügen <table class='tr_link' >und .tr_link{cursor:pointer}in CSS für die beste Verwendung geben.
Bagova

6
Um den tr[data-href] { cursor: pointer }
Handeffekt

27

Wenn Sie einen Browser verwenden, der dies unterstützt, können Sie CSS verwenden, um das <a>in eine Tabellenzeile umzuwandeln :

.table-row { display: table-row; }
.table-cell { display: table-cell; }

<div style="display: table;">
    <a href="..." class="table-row">
        <span class="table-cell">This is a TD... ish...</span>
    </a>
</div>

Natürlich dürfen Sie keine Blockelemente in das Feld einfügen <a>. Sie können dies auch nicht mit einem normalen mischen<table>


1
Tolle Idee, danke! Es scheint auf Opera 8.5 / , Firefox 0.8 / , IE8, iPhone Simulator / Safari / sehr alt zu
funktionieren

1
Dies sollte die Technik sein, die Entwickler anwenden möchten , da CSS-Tabellen von allen aktuellen Browsern unterstützt werden: caniuse.com/#feat=css-table Das einzige Problem ist, dass ich dies nicht mit Bootstrap verwenden kann! : '(
shangxiao

13

Wenn Sie haben eine Tabelle verwenden, können Sie einen Link in jeder Tabellenzelle setzen:

<table>
  <tbody>
    <tr>
      <td><a href="person1.html">John Smith</a></td>
      <td><a href="person1.html">123 Fake St</a></td>
      <td><a href="person1.html">90210</a></td>
    </tr>
    <tr>
      <td><a href="person2.html">Peter Nguyen</a></td>
      <td><a href="person2.html">456 Elm Ave</a></td>
      <td><a href="person2.html">90210</a></td>
    </tr>
  </tbody>
</table>

Und lassen Sie die Links die gesamten Zellen ausfüllen:

table tbody tr td a {
  display: block;
  width: 100%;
  height: 100%;
}

Wenn Sie <div>s anstelle einer Tabelle verwenden können, kann Ihr HTML-Code viel einfacher sein und Sie erhalten keine "Lücken" in den Links zwischen den Tabellenzellen:

<div class="myTable">
  <a href="person1.html">
    <span>John Smith</span>
    <span>123 Fake St</span>
    <span>90210</span>
  </a>
  <a href="person2.html">
    <span>Peter Nguyen</span>
    <span>456 Elm Ave</span>
    <span>90210</span>
  </a>
</div>

Hier ist das CSS, das zur <div>Methode gehört:

.myTable {
  display: table;
}
.myTable a {
  display: table-row;
}
.myTable a span {
  display: table-cell;
  padding: 2px; /* this line not really needed */
}

1
Wenn Sie tabellarische Daten anzeigen möchten, verwenden Sie immer eine Tabelle. Die Verwendung einer Sammlung von Divs und Spans ist semantisch falsch. Wenn Sie das CSS verlieren, ist der Inhalt schwer lesbar und für Benutzer, die einen Bildschirmleser verwenden, nicht zugänglich.
Gulima

12

Die übliche Methode besteht darin, dem onClickAttribut des TRElements JavaScript zuzuweisen .

Wenn Sie kein JavaScript verwenden können, müssen Sie einen Trick verwenden:

  1. Fügen Sie jeder TDZeile derselben Zeile denselben Link hinzu (der Link muss das äußerste Element in der Zelle sein).

  2. Verwandeln Sie Links in Blockelemente: a { display: block; width: 100%; height: 100%; }

Letzteres zwingt den Link, die gesamte Zelle zu füllen, sodass durch Klicken auf eine beliebige Stelle der Link aufgerufen wird.


7

Sie können ein <td>Element nicht mit einem <a>Tag umschließen, aber Sie können ähnliche Funktionen ausführen, indem Sie das onclickEreignis zum Aufrufen einer Funktion verwenden. Ein Beispiel finden Sie hier , so etwas wie diese Funktion:

<script type="text/javascript">
function DoNav(url)
{
   document.location.href = url;
}
</script>

Und fügen Sie es wie folgt zu Ihrem Tisch hinzu:

<tr onclick="DoNav('http://stackoverflow.com/')"><td></td></tr>

21
Eines der Probleme bei der Verwendung von onClick für diesen Zweck besteht darin, dass Benutzer die mittlere Maustaste oder den Mausklick nicht mehr verwenden können, um Links in einem neuen Tab zu öffnen (was für diejenigen von uns, die es lieben, Links auf diese Weise zu öffnen, sehr frustrierend sein kann). . Eine weitere Randnotiz: Es gibt keinen Grund, die Dinge zu komplizieren, indem eine Funktion erstellt wird, die nur einen einfachen Befehl ausführt. Wenn Sie dies tun, fügen Sie einfach "document.location.href = ..." direkt in das onclick-Attribut ein.
5.

7

Die Antwort von Sirwilliam passt am besten zu mir. Ich habe das Javascript mit Unterstützung für die Tastenkombination Strg + Linksklick verbessert (Seite in neuem Tab öffnen). Das Ereignis ctrlKeywird von PCs und metaKeyMacs verwendet.

Javascript

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 2 || (click == 1 && (e.ctrlKey || e.metaKey))){
            window.open(url, '_blank');
            window.focus();
        }
        else if(click == 1){
            window.location.href = url;
        }
        return true;
    }
});

Beispiel

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/


Gut. Strg + LeftClick bricht UIX nicht
Yuri

Immer noch "Rechtsklick -> In einem neuen Tab öffnen" oder "In einem neuen Fenster öffnen"
verlieren

4

Ich weiß, dass diese Frage bereits beantwortet wurde, aber ich mag immer noch keine Lösung auf dieser Seite. Für die Benutzer von JQuery habe ich eine endgültige Lösung erstellt, mit der Sie der Tabellenzeile fast das gleiche Verhalten wie dem <a>Tag geben können.

Das ist meine Lösung:

jQuery Sie können dies beispielsweise zu einer standardmäßigen enthaltenen Javascript-Datei hinzufügen

$('body').on('mousedown', 'tr[url]', function(e){
    var click = e.which;
    var url = $(this).attr('url');
    if(url){
        if(click == 1){
            window.location.href = url;
        }
        else if(click == 2){
            window.open(url, '_blank');
            window.focus();
        }
        return true;
    }
});

HTML Jetzt können Sie dies für jedes <tr>Element in Ihrem HTML verwenden

<tr url="example.com">
    <td>value</td>
    <td>value</td>
    <td>value</td>
<tr>

So nah an reinem js. document.querySelector('tr[url]').addEventListener("mousedown", function(e){ var click = e.which; var url = this.getAttribute("url"); if(url){ if(click == 1){ window.location.href = url; } else if(click == 2){ window.open(url, '_blank'); window.focus(); } return true; } });
Ramon Bakker

1
Im Jahr 2014 war das nicht in Vanille js verfügbar , Sie verwöhnten Göre ; P.
Botenvouwer

2

Wenn ich ein <tr>mit einem Link simulieren möchte, aber die HTML-Standards respektiere, mache ich das.

HTML:

<table>
    <tr class="trLink">
        <td>
            <a href="#">Something</a>
        </td>
    </tr>
</table>

CSS:

tr.trLink {
    cursor: pointer;
}
tr.trLink:hover {
   /*TR-HOVER-STYLES*/
}

tr.trLink a{
    display: block;
    height: 100%;
    width: 100%;
}
tr.trLink:hover a{
   /*LINK-HOVER-STYLES*/
}

Auf diese Weise erhält die gesamte Zeile (und diese Links) den Schwebestil, wenn jemand mit der Maus auf eine TR fährt, und er kann nicht erkennen, dass mehrere Links vorhanden sind.

Hoffnung kann jemandem helfen.

Geige HIER


1

Dies erspart Ihnen das Duplizieren des Links im tr - fischen Sie ihn einfach aus dem ersten a heraus.

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

0
//Style
  .trlink {
    color:blue;
  }
  .trlink:hover {
    color:red;
  }

<tr class="trlink" onclick="function to navigate to a page goes here">
<td>linktext</td>
</tr>

Etwas in diese Richtung vielleicht? Es wird zwar JS verwendet, aber nur so kann eine Zeile (tr) angeklickt werden.

Es sei denn, Sie haben eine einzelne Zelle mit einem Ankertag, der die gesamte Zelle ausfüllt.

Und dann sollten Sie sowieso keinen Tisch benutzen.


0

Nachdem ich diesen und einige andere Themen gelesen hatte, fand ich die folgende Lösung in Javascript:

function trs_makelinks(trs) {
    for (var i = 0; i < trs.length; ++i) {
        if (trs[i].getAttribute("href") != undefined) {
            var tr = trs[i];
            tr.onclick = function () { window.location.href = this.getAttribute("href"); };
            tr.onkeydown = function (e) {
                var e = e || window.event;
                if ((e.keyCode === 13) || (e.keyCode === 32)) {
                    e.preventDefault ? e.preventDefault() : (e.returnValue = false);
                    this.click();
                }
            };
            tr.role = "button";
            tr.tabIndex = 0;
            tr.style.cursor = "pointer";
        }
    }
}

/* It could be adapted for other tags */
trs_makelinks(document.getElementsByTagName("tr"));
trs_makelinks(document.getElementsByTagName("td"));
trs_makelinks(document.getElementsByTagName("th"));

Um es zu verwenden, setzen Sie die href in tr / td / th, die Sie anklicken möchten, wie : <tr href="http://stackoverflow.com">. Stellen Sie außerdem sicher, dass das obige Skript ausgeführt wird, nachdem das tr-Element erstellt wurde (durch Platzierung oder Verwendung von Ereignishandlern).

Der Nachteil ist, dass sich die TRs nicht vollständig wie Links mit divs verhalten display: table;, und dass sie nicht über die Tastatur ausgewählt werden können oder keinen Statustext haben. Bearbeiten: Ich habe die Tastaturnavigation durch Festlegen von onkeydown, role und tabIndex zum Laufen gebracht. Sie können diesen Teil entfernen, wenn nur die Maus benötigt wird. Beim Schweben wird die URL jedoch nicht in der Statusleiste angezeigt.

Sie können die Link-TRs speziell mit dem CSS-Selektor "tr [href]" formatieren.


0

Ich habe einen anderen Weg. Insbesondere, wenn Sie Daten mit jQuery veröffentlichen müssen

$(document).on('click', '#tablename tbody tr', function()
{   
    var test="something";
    $.post("ajax/setvariable.php", {ID: this.id, TEST:test}, function(data){        
        window.location.href = "http://somepage";
    });
});

Variable festlegen richtet in SESSIONS Variablen ein, die auf der Seite, die Sie lesen möchten, gelesen und bearbeitet werden können.

Ich hätte wirklich gerne eine Möglichkeit, direkt an einem Fenster zu posten, aber ich denke nicht, dass dies möglich ist.


0

Danke dafür. Sie können das Hover-Symbol ändern, indem Sie der Zeile eine CSS-Klasse zuweisen:

<tr class="pointer" onclick="document.location = 'links.html';">

und das CSS sieht aus wie:

<style>
    .pointer { cursor: pointer; }
</style>

-2

Können Sie der Zeile ein A-Tag hinzufügen?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

Fragen Sie das?


1
Nein, ich muss für alle Zeilenbereiche klicken.
Max Frai
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.