Wie kann eine ganze Zeile in einer Tabelle als Link angeklickt werden?

436

Ich verwende Bootstrap und Folgendes funktioniert nicht:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>
user1038814
quelle
2
JavaScript könnte dafür besser sein
John Conde
1
Er benutzt Bootstrap, also denke ich, dass er dazu in der Lage sein sollte :)
Ahmed Masud
Wie wäre es, ein transparentes A-Element vor die Zeile zu setzen? Auf diese Weise hätte es alle Eigenschaften eines echten Links (Statusleiste, mittlerer Klick usw.) und würde auch das Aussehen der Tabelle nicht ändern (falls dies gewünscht wird).
David Balažic
1
Duplikat von HTML - Tabellenzeile wie ein Link
Joseph Holsten

Antworten:

568

Anmerkung des Autors I:

Bitte schauen Sie sich unten andere Antworten an, insbesondere solche, die keine Abfrage verwenden.

Anmerkung des Autors II:

Für die Nachwelt erhalten, aber sicherlich der falsche Ansatz im Jahr 2020. (War schon im Jahr 2017 nicht idiomatisch)

Ursprüngliche Antwort

Sie verwenden Bootstrap, was bedeutet, dass Sie jQuery verwenden: ^). Eine Möglichkeit, dies zu tun, ist:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


jQuery(document).ready(function($) {
    $(".clickable-row").click(function() {
        window.location = $(this).data("href");
    });
});

Natürlich müssen Sie keine href verwenden oder die Position wechseln, Sie können in der Click-Handler-Funktion alles tun, was Sie möchten. Lesen Sie weiter jQueryund erfahren Sie, wie Sie Handler schreiben.

Der Vorteil der Verwendung einer Klasse gegenüber der ID besteht darin, dass Sie die Lösung auf mehrere Zeilen anwenden können:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

und Ihre Codebasis ändert sich nicht. Der gleiche Handler würde sich um alle Zeilen kümmern.

Andere Option

Sie können Bootstrap jQuery-Rückrufe wie folgt verwenden (in einem document.readyRückruf):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

Dies hat den Vorteil, dass es beim Sortieren der Tabelle nicht zurückgesetzt wird (was bei der anderen Option der Fall ist).


Hinweis

Da dies gepostet wurde, window.document.locationist die Verwendung veraltet (oder zumindest veraltet) window.location.

Ahmed Masud
quelle
105
Möglicherweise möchten Sie den Cursor auch mit dem Befehl css: tr.clickableRow {cursor: pointer; }
Winston Kotzan
78
Ich wollte nur hinzufügen, dass Sie kein hrefAttribut für a verwenden sollten tr, da es kein gültiges Attribut für dieses Element ist. Verwenden Sie stattdessen data-url="{linkurl}"Datenattribute : und in js-Code:$(this).data('url')
Maksim Vi.
12
Sie können die Verwendung einer Klasse in jeder Zeile vermeiden und die Tabelle mit dem Klassennamen clickable_row(CamelCase verstößt gegen HTML-Standards und sollte in Kleinbuchstaben geschrieben sein (ich hatte einige Probleme mit dem Cross-Browser)) und dann lautet die jQuery " $('.clickable_row tr').click(function ...Aber" Eigentlich sollten Sie data-Daten speichern, anstatt hrefdass dies die Spezifikation für benutzerdefinierte Daten ist. data-urlund jquery wird darauf zugreifen wie$(this).data(url);
Piotr Kula
3
Zu Ihrer Information: Wenn Sie können, sollten Sie irgendwo in der tr einen Link für Personen hinterlassen, bei denen Javascript deaktiviert ist.
Hitautodestruct
47
Kein großer Fan dieser Lösung, da Benutzer die Link-URL beim Bewegen des Mauszeigers unten im Browser nicht sehen und vor allem nicht auf den Link klicken können, um ihn in einem neuen Tab zu öffnen. Das Einfügen eines aTags display: block;in jede Zelle ist etwas ärgerlich, scheint jedoch der nützlichste Weg zu sein, um dieses Problem zu lösen.
Maxime Rossini
222

Das kannst du nicht machen. Es ist ungültiges HTML. Sie können kein <a>zwischen a <tbody>und a setzen <tr>. Versuchen Sie stattdessen Folgendes:

<tr onclick="window.location='#';">
        ...
     </tr>

Stil für Zeigeransicht hinzufügen

[data-href] { cursor: pointer; }

Wenn Sie daran arbeiten, möchten Sie JavaScript verwenden, um den Klick-Handler außerhalb des HTML-Codes zuzuweisen.

Davidfurber
quelle
3
@Aquillo das OP gibt ausdrücklich an, dass er / sie Bootstrap verwendet. Eine jQuery-Lösung wäre also besser im Rahmen
Ahmed Masud
39
@ AhmedMasud In diesem Fall ja. Für alle zukünftigen Leser könnte einfaches JS eine bessere Lösung sein. Da dies der Zweck von Stackoverflow ist, halte ich meinen Kommentar immer noch für gültig.
Menno
3
Die Trennung von Verhalten und Aufschlag ist sicherlich zu bevorzugen. Wenn überhaupt, würde ich sagen, dass href kein gültiges Attribut auf einem tr ist. Es sollte durch ein data-href ersetzt werden und $ (this) .attr durch $ (this) .data ersetzen.
Davidfurber
1
Oder Sie können den Ereignisbindungsansatz der Klasse ".clickableRow" nach dem ersten <a>in der angeklickten Zeile suchen lassen . (das würde sich auch anmutig verschlechtern)
Jason Sperske
3
Wenn Sie die ES6-Syntax verwenden, können Sie den Link wie folgt ausführen:onClick={() => window.open('https://stackoverflow.com/', '_blank')}
Louie Bertoncin
185

Sie können in jeden einen Anker einfügen <td>, wie folgt:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

Sie können dann display:block;die Anker verwenden, um die gesamte Zeile anklickbar zu machen.

tr:hover { 
   background: red; 
}
td a { 
   display: block; 
   border: 1px solid black;
   padding: 16px; 
}

Beispiel jsFiddle hier.

Dies ist wahrscheinlich so optimal, wie Sie es bekommen werden, es sei denn, Sie greifen auf JavaScript zurück.

dsgriffin
quelle
11
Dies ist die beste Lösung, keine Abfrage, kein Javascript, nur CSS, dh mein Link könnte anders sein, nicht href, mit mehreren Parametern wie <a4j: commandLink />, also behalte ich es und ändere nur den Stil. Danke vielmals.
TiyebM
4
@ Daniel gute Antwort, aber wenn die Zelle nach unten erstreckt, funktioniert nicht richtig wie diese jsfiddle.net/RFFy9/253
Midackack
4
Großartig! Diese Lösung ermöglicht das Öffnen des Links in einem neuen Tab, wenn der Benutzer dies wünscht. Leere Spalten haben jedoch keine Links.
Ignacio Pérez
9
@AnnaRouben Ich muss nicht zustimmen: Mehrere ähnliche Links zu haben ist ein sehr kleiner Nachteil im Vergleich zu den Upsides (funktioniert ohne JS, der Bildschirmleser kann lesen, wohin der Link führt, kann bei gedrückter Strg-Taste in einem neuen Tab öffnen. ..) Pure-HTML-Lösungen funktionieren in Hilfssoftware fast immer besser als JS-Lösungen.
JJJ
6
Ich mag diese Lösung, weil sie zugänglich ist. Benutzer können die Links durchblättern und Links in neuen Registerkarten öffnen. Was ich in meiner App getan habe, wird tabindex="-1"auf alle außer dem ersten <td>Link gesetzt, sodass der Benutzer Zeilen für Zeilen und nicht von Zelle zu Zelle wechselt. Außerdem können Sie weiterhin die gesamte Zeile markieren / umreißen, wenn Sie die :focus-withinCSS-Pseudoklasse verwenden möchten .
Jonathan
89

Eine verknüpfte Tabellenzeile ist möglich, jedoch nicht mit den Standardelementen <table>. Sie können dies mithilfe der display: tableStileigenschaften tun . Hier und hier sind einige Geigen zu demonstrieren.

Dieser Code sollte den Trick machen:

.table {
  display: table;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 10px;
}

.row:hover {
  background-color: #cccccc;
}

.cell:hover {
  background-color: #e5e5e5;
}
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

  <a role="row" class="row" href="#">
    <div role="gridcell" class="cell">
      2.1
    </div>
    <div role="gridcell" class="cell">
      2.2
    </div>
    <div role="gridcell" class="cell">
      2.3
    </div>
  </a>
</div>

Beachten Sie, dass ARIA-Rollen erforderlich sind, um eine ordnungsgemäße Zugänglichkeit sicherzustellen, da die Standardelemente <table>nicht verwendet werden. Möglicherweise müssen Sie zusätzliche Rollen hinzufügen, z. B. role="columnheader"falls zutreffend. Weitere Informationen finden Sie im Leitfaden hier.

Trevin Avery
quelle
13
Versuchen Sie nun, das dataTables-Plugin auf dieses Plugin anzuwenden! :)
Afonso Gomes
7
Dies ist meiner Meinung nach die richtige Antwort, da alle Benutzeragenten-Tools für Links erhalten bleiben: Suche (z. B. /Schlüssel in Firefox), Navigation ( tabSchlüssel), Linkposition kopieren, In neuem Tab / Fenster öffnen usw., auch für zugängliche / spezielle braucht Browser. Mein einziger nitpick ist , dass ich nicht Nest eine im <div>Innern ein <a>, so würden die Zellen besser auf , als markiert werden <span>.
Tobia
Das Anwenden von Plugins und Bibliotheken von Drittanbietern auf solche CSS-Tabellen erfordert möglicherweise etwas mehr Arbeit, ist jedoch normalerweise das Kopieren, Einfügen und Ersetzen. Zum Beispiel habe ich nur die eigenen _tables.scssund einige andere zufällige Teile von Bootstrap dupliziert und alle Vorkommen von Tabellenelementen durch die von mir ausgewählten CSS-Klassen ersetzt (die einfach mit den Elementen identisch sind: th.th). Im Vergleich zu den Vorteilen eigentlich nicht viel Arbeit .
Tobia
2
Gute Antwort, aber dies ist nur dann eine Lösung, wenn die Tabelle nur für die richtige Ausrichtung verwendet wurde (was in vielen Situationen der Fall ist!). Bei tabellarischen Daten gibt es die Semantik <table>aus einem bestimmten Grund. Aber das schlägt immer noch jede Javascript-Lösung :)
Marten Koetsier
Obwohl dies eine sehr clevere Lösung ist, ist es genau das. Es ist eigentlich keine Tabelle und wird daher, wie der Autor erwähnt, Probleme mit der Zugänglichkeit bereiten. Es wird sehr wahrscheinlich Probleme mit anderen Dingen verursachen, die eine Tabelle erwarten, aber eine bekommen.
Tyson Gibby
25

Erreicht mit Standard Bootstrap 4.3+ wie folgt - weder jQuery noch zusätzliche CSS-Klassen erforderlich!

Der Schlüssel besteht darin, stretched-linkden Text in der Zelle zu verwenden und <tr>als enthaltenden Block zu definieren.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Sie können den enthaltenen Block auf verschiedene Arten definieren, indem Sie beispielsweise den transformWert nicht auf keinen Wert setzen (wie im obigen Beispiel).

Weitere Informationen finden Sie in der Bootstrap-Dokumentation für stretched-link.

Krishna Gupta
quelle
1
Diese Antwort verdient mehr Abstimmung. Überhaupt kein Javascript. Und wofür ist das scope="row"? Ich verwende keinen Bereich und die Zeile verhält sich immer noch als Link.
Christhofer Natalius
@ChristhoferNatalius danke! Meine ursprüngliche Antwort enthielt nicht das scope="row"- bitte überprüfen Sie den Verlauf, wenn Sie sehen möchten, was möglicherweise noch bearbeitet wurde. Ich habe die Änderungen jedoch nicht zurückgesetzt, da das Code-Snippet zu funktionieren scheint (wie auch das Original) und ich nicht die Möglichkeit hatte, den neuen Code ausführlich zu testen :-)
Krishna Gupta
Der Nachteil dabei ist, dass sich der Link über den Spalten befindet, Sie den Text nicht kopieren können und der Attributtitel in td nicht angezeigt wird, wenn Sie mit der Maus darüber fahren. Also muss ich leider zum alten Weg zurückkehren, den Link nur auf eine Spalte setzen.
Christhofer Natalius
2
Ich mochte diese Lösung, aber leider ist sie nicht browserübergreifend (Chrome / Firefox sind in Ordnung, aber nicht Safari). Das Problem ist auf ein trTag zurückzuführen, das unter den Browsern nicht als Regeln für den enthaltenen Block erkannt wird ... stackoverflow.com/questions/61342248/…
pom421
17

Eine viel flexiblere Lösung besteht darin, alles mit dem Attribut data-href anzuvisieren. Auf diese Weise können Sie den Code problemlos an verschiedenen Stellen wiederverwenden.

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

Dann zielen Sie in Ihrer jQuery einfach auf ein Element mit diesem Attribut:

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

Und vergessen Sie nicht, Ihr CSS zu stylen:

[data-href] {
    cursor: pointer;
}

Jetzt können Sie jedem Element das Attribut data-href hinzufügen, und es funktioniert. Wenn ich solche Schnipsel schreibe, möchte ich, dass sie flexibel sind. Fühlen Sie sich frei, eine Vanille-js-Lösung hinzuzufügen, wenn Sie eine haben.

AbdelElrafa
quelle
gute
Meine Lieblingslösung. Gut gemacht 👍🏽
MFrazier
7

Sie können diese Bootstrap-Komponente verwenden:

http://jasny.github.io/bootstrap/javascript/#rowlink

Jasny Bootstrap

Die fehlenden Komponenten für Ihr bevorzugtes Front-End-Framework.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

Verwendungszweck

Über Datenattribute

Fügen Sie einem oder Element eine Klasse .rowlinkund ein Attribut hinzu . Für andere Optionen hängen Sie den Namen an data- an, wie in Eine Zelle kann durch Hinzufügen der Klasse zum ausgeschlossen werdendata-link="row"<table><tbody>data-target="a.mainlink".rowlink-skip<td> .

Über JavaScript

Rufen Sie die Eingabemaske über Javascript auf:

$('tbody.rowlink').rowlink()
Schleim
quelle
6

Es gibt eine gute Möglichkeit, dies technisch mit einem <a>Tag im Inneren zu tun. Dies ist <tr>möglicherweise semantisch falsch (gibt möglicherweise eine Browser-Warnung aus), funktioniert jedoch ohne JavaScript/jQueryErfordernis:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

PS: Beachten Sie, dass der Trick hier zu setzen ist <a> Tag als letztes Element zu setzen, andernfalls wird versucht, den Platz der ersten <td>Zelle einzunehmen .

PPS: Jetzt kann Ihre gesamte Zeile angeklickt werden. Über diesen Link können Sie auch eine neue Registerkarte öffnen (Strg / CMD + Klick).

Ronen
quelle
Ist das nicht im Grunde das Gleiche wie meine Antwort ?
David Balažic
Diese Antwort sieht zwar perfekt aus, funktioniert aber nicht, da <tr>Elemente <a>als untergeordnetes Element kein Element haben können . Nur <td>und <th>sind gültige Kinder. Siehe: stackoverflow.com/questions/12634715/…
funkybunky
5

Sie können die Javascript-Methode onclick in tr verwenden und anklickbar machen. Wenn Sie Ihren Link aufgrund einiger Details erstellen müssen, können Sie eine Funktion in Javascript deklarieren und in onclick aufrufen, indem Sie einige Werte übergeben.

Anahit Serobyan
quelle
5

Hier ist eine Möglichkeit, ein transparentes A-Element über die Tabellenzeilen zu setzen. Vorteile sind:

  • ist ein echtes Linkelement: Beim Schweben ändert sich der Zeiger, zeigt den Ziellink in der Statusleiste an, kann über die Tastatur navigiert werden, kann in einem neuen Tab oder Fenster geöffnet werden, die URL kann kopiert werden usw.
  • Die Tabelle sieht genauso aus wie ohne den hinzugefügten Link
  • Keine Änderungen im Tabellencode

Nachteile:

  • Die Größe des A-Elements muss sowohl bei der Erstellung als auch nach Änderungen an der Größe der abgedeckten Zeile in einem Skript festgelegt werden (andernfalls kann dies ohne JavaScript erfolgen, was auch dann möglich ist, wenn auch die Tabellengröße festgelegt wird in HTML oder CSS)

Der Tisch bleibt wie er ist:

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

Fügen Sie die Links (für jede Zeile) über jQuery JavaScript hinzu, indem Sie in jede erste Spalte ein A-Element einfügen und die erforderlichen Eigenschaften festlegen:

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

Die Einstellung für Breite und Höhe kann schwierig sein, wenn viele Auffüllungen und Ränder verwendet werden, aber im Allgemeinen sollten ein paar Pixel weniger nicht einmal von Bedeutung sein.

Live-Demo hier: http://jsfiddle.net/qo0dx0oo/ (funktioniert in Firefox, aber nicht in IE oder Chrome, da der Link falsch positioniert ist)

Behoben für Chrome und IE (funktioniert auch noch in FF): http://jsfiddle.net/qo0dx0oo/2/

David Balažic
quelle
2
Clevere Lösung. Ich fand, dass das träge Erstellen des Elements erst nach dem Schweben der Zeile einen enormen Leistungsschub für große Tische brachte.
Levi
1
@levi kannst du ein Feedback geben, wie man dies lazyload?
Subliminal Hash
@KemalEmin Ich würde annehmen, dass er Javascript verwenden würdeonmouseover
Brad
5

Sie können die Schaltflächenrolle zu einer Tabellenzeile hinzufügen, und Bootstrap ändert den Cursor ohne CSS-Änderungen. Ich entschied mich, diese Rolle zu verwenden, um jede Zeile mit sehr wenig Code einfach anklickbar zu machen.

Html

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

$(function(){
     $(".table").on("click", "tr[role=\"button\"]", function (e) {
          window.location = $(this).data("href");
     });
});

Sie können dasselbe Prinzip anwenden, um jedem Tag die Schaltflächenrolle hinzuzufügen.

Todd Skelton
quelle
wow es funktionierte tatsächlich mit ui-sref statt data-href ohne den jquery code. müssen nur den Cursor auf Finger ändern.
Nurp
Dies funktionierte einwandfrei dank einer Tonne
Ashish Banerjee
4

Dieser Code unten macht Ihre gesamte Tabelle anklickbar. Wenn Sie in diesem Beispiel auf die Links klicken, wird der Link in einem Warndialog angezeigt, anstatt dem Link zu folgen.

Der HTML:

Hier ist der HTML-Code hinter dem obigen Beispiel:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

Das CSS

Und das CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

Die jQuery

Und schließlich die jQuery, die die Magie möglich macht:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

Wenn auf eine Zeile geklickt wird, wird nach dem zu einem Anker gehörenden href gesucht. Wenn einer gefunden wird, wird der Standort des Fensters auf diesen href gesetzt.

Aydan Aleydin
quelle
4

Eine sehr einfache Option ist aus meiner Sicht die Verwendung von On-Click und korrekter, da dies die Ansicht und den Controller voneinander trennt und Sie die URL nicht hart codieren müssen oder was auch immer Sie mit dem Klick erreichen müssen . Es funktioniert auch mit Angular ng-click.

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

Beispiel hier arbeiten

Wendell Pereira
quelle
1
Dies ist sicherlich die richtige Antwort. Die anderen sind für so eine einfache Sache verrückt komplex. Wenn Sie den Mauszeiger ändern möchten, können Sie tr: hover {cursor: pointer; } zu Ihrer CSS-Klasse
Tom Close
1
@TomClose Abhängig davon, was der Zeilenklick tun soll, kann dies problematisch sein, da z. B. die Navigation nicht normal funktioniert - keine Umschaltklicks zum Öffnen in einem neuen Tab / Fenster, kein Schwebeflug zum
Anzeigen des
3

Eine weitere Option unter Verwendung eines <a>, CSS Positionen und einige jQuery oder JS :

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

Dann müssen Sie dem eine Breite geben, zum Beispiel mit jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });
Yisela
quelle
3

Ich weiß, dass jemand schon ziemlich dasselbe geschrieben hat, aber mein Weg ist der richtige (div kann kein Kind von A sein) und es ist auch besser, Klassen zu verwenden.

Sie können eine Tabelle mit CSS imitieren und ein A-Element zur Zeile machen

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

CSS:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}
Sidupac
quelle
3

Ich würde es vorziehen, onclick=""Attribut zu verwenden , da es für Neulinge einfach zu verwenden und zu verstehen ist

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>
Ali Raza
quelle
3

Hier ist eine einfache Lösung ..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>
Murad
quelle
2

Die akzeptierte Antwort ist großartig, aber ich schlage eine kleine Alternative vor, wenn Sie die URL nicht bei jedem Versuch wiederholen möchten. Sie setzen also die URL oder href in die Tabelle data-url und nicht die tr.

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

Dies ist auch gut, da Sie das Klickdatenattribut nicht zu jedem tr hinzufügen müssen. Die andere gute Sache ist, dass wir keine Klasse verwenden, um einen Klick auszulösen, da Klassen eigentlich nur für das Styling verwendet werden sollten.

Thomas Williams
quelle
2

Eine Lösung, die zuvor nicht erwähnt wurde, besteht darin, eine einzelne Verknüpfung in einer Zelle und etwas CSS zu verwenden, um diese Verknüpfung über die Zellen zu erweitern:

table {
  border: 1px solid;
  width: 400px;
  overflow: hidden;
}

tr:hover {
  background: gray;
}

tr td {
  border: 1px solid;
}

tr td:first-child {
  position:relative;
}

a:before {
  content: '';
  position:absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: block;
  width: 400px;
}
<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

passatgt
quelle
Das sieht ziemlich elegant aus. ABER die Google Link Demo funktioniert nicht. Stackoverflow macht man. Wahrscheinlich ist nur Google ein Esel, wie sie es oft sind. Vielleicht Link zu Bing :-) Serviert sie richtig. Trotzdem eine schöne und ordentliche Lösung.
BeNice
Das funktioniert mir !! Schöne Lösung. Zu beachten ist, dass die Breite für a: before lang genug sein muss, um den Tisch abzudecken.
Arst
1
<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

Während die Hauptlösung hier großartig ist, macht meine Lösung den Unterricht überflüssig. Sie müssen lediglich das Attribut data-href mit der darin enthaltenen URL hinzufügen.

Christopher Vickers
quelle
1

Ich habe viel Zeit investiert, um dieses Problem zu lösen.

Es gibt 3 Ansätze:

  1. Verwenden Sie JavaScript. Die klaren Nachteile: Es ist nicht möglich, eine neue Registerkarte nativ zu öffnen, und wenn Sie mit der Maus über die Zeile fahren, wird in der Statusleiste keine Anzeige angezeigt, wie dies bei normalen Links der Fall ist. Zugänglichkeit ist auch eine Frage.

  2. Verwenden Sie nur HTML / CSS. Dies bedeutet, dass <a>unter jedem verschachtelt wird <td>. Ein einfacher Ansatz wie diese Geige funktioniert nicht - da die anklickbare Oberfläche nicht unbedingt für jede Spalte gleich ist. Dies ist ein ernstes UX-Problem. Wenn Sie ein <button>in der Zeile benötigen , ist es kein gültiges HTML, um es unter dem <a>Tag zu verschachteln (obwohl Browser damit einverstanden sind).

    Ich habe drei andere Möglichkeiten gefunden, um diesen Ansatz zu implementieren. Erstens ist ok, die anderen beiden sind nicht großartig.

    a) Sehen Sie sich dieses Beispiel an :

    tr {
      height: 0;
    }
    
    td {
      height: 0;
      padding: 0;
    }
    
    /* A hack to overcome differences between Chrome and Firefox */
    @-moz-document url-prefix() {
      td {
        height: 100%;
      }
    }
    
    a {
      display: block;
      height: 100%;
    }

    Es funktioniert, aber aufgrund von Inkonsistenzen zwischen Chrome und Firefox ist ein browserspezifischer Hack erforderlich, um die Unterschiede zu überwinden. Außerdem richtet Chrome den Zelleninhalt immer nach oben aus, was zu Problemen mit langen Texten führen kann, insbesondere wenn unterschiedliche Zeilenhöhen auftreten.

    b) Einstellung <td>auf{ display: contents; } . Dies führt zu 2 weiteren Problemen:

    b1. Wenn jemand anderes versucht, das <td>Tag direkt zu formatieren, wie z. B. das Setzen auf { width: 20px; }, müssen wir diesen Stil irgendwie an das übergeben<a> Tag übergeben. Wir brauchen etwas Magie, wahrscheinlich mehr Magie als in der Javascript-Alternative.

    b2. { display: contents; }ist noch experimentell; Insbesondere wird es auf Edge nicht unterstützt.

    c) Einstellung <td>auf { height: --some-fixed-value; }. Das ist einfach nicht flexibel genug.

  3. Der letzte Ansatz, über den ich ernsthaft nachdenken sollte, besteht darin, überhaupt keine anklickbaren Zeilen zu verwenden . Klickbare Zeilen sind keine großartige UX-Erfahrung: Es ist nicht einfach, sie visuell als anklickbar zu markieren, und es ist eine Herausforderung, wenn mehrere Teile wie Schaltflächen innerhalb der Zeilen anklickbar sind. Eine praktikable Alternative könnte also sein, ein <a>Tag nur in der ersten Spalte als regulären Link anzuzeigen und ihm die Rolle des Navigierens in der gesamten Zeile zu geben.

Gamliela
quelle
0

Hier ist ein anderer Weg ...

Der HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

Die jQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});
klewis
quelle
Wie können wir es in einem neuen Tab öffnen? @klewis
Khushbu Vaghela
0
<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Ersetzen Sie # durch die URL, um tabindex="0"jedes Element fokussierbar zu machen

Rahul
quelle
-1

Sie könnten der Zeile eine ID geben, z

<tr id="special"> ... </tr>

und dann benutze jquery, um etwas zu sagen wie:

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

Peter Berg
quelle
1
Ich glaube, Sie möchten Klasse anstelle von ID verwenden, da Sie höchstwahrscheinlich mehrere Zeilen haben und ID nur für ein Element verwendet werden sollte.
Programmingjoe
-11

Warum sollten wir keine "div" -Tags verwenden?

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>
Ramesh J.
quelle
1
Sie sollten Ihre Antwort mit CSS-Anzeige verbessern: Tabelle
m1crdy
Verbessern Sie die Antwort durch Hinzufügen von CSS
Prathamesh More