Wie macht man eine ganze Zeile in einer Tabelle als Link anklickbar?

Question

Ich benutze Bootstrap und das Folgende funktioniert nicht:

            Blah Blah
            1234567
            £158,000

Answer 1

Anmerkung des Autors I:

Bitte sehen Sie sich auch andere Antworten unten an, insbesondere solche, die kein jQuery verwenden.

Anmerkung des Autors II:

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

Ursprüngliche Antwort

Sie verwenden Bootstrap, was bedeutet, dass Sie jQuery verwenden :^), also eine Möglichkeit, dies zu tun wäre:

        Blah Blah 1234567 £158,000

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

Sie müssen natürlich nicht href verwenden oder die Standorte wechseln, Sie können im Klick-Handler tun, was Sie wollen. Informieren Sie sich über jQuery und wie man Handler schreibt;

Der Vorteil der Verwendung einer Klasse anstelle einer id besteht darin, dass Sie die Lösung auf mehrere Zeilen anwenden können:

        Blah Blah 1234567 £158,000

        Mehr Geld 1234567 £800,000

und Ihr Code bleibt gleich. Derselbe Handler würde sich um alle Zeilen kümmern.

Eine andere Option

Sie können Bootstrap jQuery-Callbacks wie folgt verwenden (in einem document.ready Rü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 passiert).

---

Hinweis

Da dies gepostet wurde, ist window.document.location veraltet (oder zumindest veraltet), verwenden Sie stattdessen window.location.

Answer 2

Sie können das nicht tun. Es handelt sich um ungültiges HTML. Sie können kein zwischen einem und einem platzieren. Versuchen Sie stattdessen dies:

...

Fügen Sie einen Style für die Mauszeigeransicht hinzu

[data-href] { cursor: pointer; }

Wenn Sie sich darauf vorbereiten, möchten Sie den Klick-Handler mit JavaScript außerhalb des HTML zuweisen.

Answer 3

Sie könnten in jedem einen Anker einfügen, so:

  Blah Blah
  1234567
  mehr Text

Dann könnten Sie display:block; auf die Anker anwenden, um die gesamte Zeile anklickbar zu machen.

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

Hier ist ein Beispiel jsFiddle.

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

Answer 4

Ein verknüpfter Tabellenzeile ist möglich, jedoch nicht mit den Standard `display: table`Hierhier

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;
}

      1.1

      1.2

      1.3

      2.1

      2.2

      2.3

Beachte, dass ARIA-Rollen benötigt werden, um eine ordnungsgemäße Barrierefreiheit sicherzustellen, da die Standard

Elementen. Du kannst dies mit den Style-Eigenschaften tun. und sind einige Fiddles zur Demonstration. Elemente nicht verwendet werden. Du musst möglicherweise zusätzliche Rollen wie role="columnheader"Erfahre mehr in der Anleitung hier.

hinzufügen, wenn dies zutrifft.``

Answer 5

Mit Standard-Bootstrap 4.3+ so erreicht - kein jQuery oder zusätzliche CSS-Klassen notwendig!

Der Schlüssel liegt darin, stretched-link auf den Text innerhalb der Zelle zu verwenden und als enthaltenden Block zu definieren.

    1
      Mark
      Otto
      @mdo

      2
      Jacob
      Thornton
      @fat

      3
      Larry
      the Bird
      @twitter

Den enthaltenden Block kann man auf verschiedene Arten definieren, z.B. durch das Setzen von transform auf einen anderen Wert als "none" (wie im obigen Beispiel).

Für weitere Informationen hier ist die Bootstrap-Dokumentation für stretched-link.