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

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

        Spalte 1
        Spalte 2

Dann zielen Sie einfach in Ihrem jQuery auf jedes Element mit diesem Attribut:

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

Vergessen Sie nicht, Ihr CSS zu stylen:

[data-href] {
    cursor: pointer;
}

Jetzt können Sie das data-href Attribut zu jedem Element hinzufügen und es wird funktionieren. Wenn ich Snippets wie dieses schreibe, möchte ich, dass sie flexibel sind. Fühlen Sie sich frei, eine Vanilla-JS-Lösung hinzuzufügen, wenn Sie eine haben.

Answer 2

Hier ist eine einfache Lösung..

Answer 3

Eine Lösung, die zuvor nicht erwähnt wurde, besteht darin, einen einzelnen Link in einer Zelle und einige CSS zu verwenden, um diesen Link über die Zellen zu erstrecken:

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

    Erste Spalte
    Zweite Spalte
    Dritte Spalte

    Erste Spalte
    Zweite Spalte
    Dritte Spalte

Answer 4

Sie können die Schaltflächenrolle zu einer Tabellenzeile hinzufügen und Bootstrap ändert den Cursor ohne Änderungen am CSS. Ich habe mich entschieden, diese Rolle als Möglichkeit zu verwenden, um jede Zeile mit sehr wenig Code leicht anklickbar zu machen.

Html

               Zelle 1
               Zelle 2
               Zelle 3

jQuery

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

Sie können dieses Prinzip auch auf jedes Tag anwenden, um die Schaltflächenrolle hinzuzufügen.

Answer 5

Sie können dieses Bootstrap-Komponente verwenden:

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

Jasny Bootstrap

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

    NameBeschreibungAktionen

    EingabemaskeEingabemasken können verwendet werden, um den Benutzer zu zwingen, Daten gemäß einem spezifischen Format einzugeben.Aktion
    jasny.netGemeinsames Wissen von Arnold Daniels aka Jasny.Aktion
    Modal startenAuslösen eines Modals über JavaScript, indem Sie auf diese Zeile klicken.Aktion

Verwendung

Über Datenattribute

Fügen Sie der ` `.rowlinkdata-link="row"data-target="a.mainlink".rowlink-skip`

hinzufügen.

Über JavaScript

Rufen Sie die Eingabemaske über JavaScript auf:

$('tbody.rowlink').rowlink()

• oder -Elementklasse und das Attribut hinzu. Für weitere Optionen hängen Sie den Namen an data- an, wie z. B. . Eine Zelle kann ausgeschlossen werden, indem Sie die Klasse zur```