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>
html
html-table
bootstrap-4
user1038814
quelle
quelle
Antworten:
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:
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
jQuery
und 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:
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.ready
Rückruf):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.location
ist die Verwendung veraltet (oder zumindest veraltet)window.location
.quelle
href
Attribut für a verwenden solltentr
, da es kein gültiges Attribut für dieses Element ist. Verwenden Sie stattdessendata-url="{linkurl}"
Datenattribute : und in js-Code:$(this).data('url')
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 Siedata-
Daten speichern, anstatthref
dass dies die Spezifikation für benutzerdefinierte Daten ist.data-url
und jquery wird darauf zugreifen wie$(this).data(url);
a
Tagsdisplay: block;
in jede Zelle ist etwas ärgerlich, scheint jedoch der nützlichste Weg zu sein, um dieses Problem zu lösen.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:Stil für Zeigeransicht hinzufügen
Wenn Sie daran arbeiten, möchten Sie JavaScript verwenden, um den Klick-Handler außerhalb des HTML-Codes zuzuweisen.
quelle
<a>
in der angeklickten Zeile suchen lassen . (das würde sich auch anmutig verschlechtern)onClick={() => window.open('https://stackoverflow.com/', '_blank')}
Sie können in jeden einen Anker einfügen
<td>
, wie folgt:Sie können dann
display:block;
die Anker verwenden, um die gesamte Zeile anklickbar zu machen.Beispiel jsFiddle hier.
Dies ist wahrscheinlich so optimal, wie Sie es bekommen werden, es sei denn, Sie greifen auf JavaScript zurück.
quelle
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-within
CSS-Pseudoklasse verwenden möchten .Eine verknüpfte Tabellenzeile ist möglich, jedoch nicht mit den Standardelementen
<table>
. Sie können dies mithilfe derdisplay: table
Stileigenschaften tun . Hier und hier sind einige Geigen zu demonstrieren.Dieser Code sollte den Trick machen:
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.quelle
/
Schlüssel in Firefox), Navigation (tab
Schlü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>
._tables.scss
und 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 .<table>
aus einem bestimmten Grund. Aber das schlägt immer noch jede Javascript-Lösung :)Erreicht mit Standard Bootstrap 4.3+ wie folgt - weder jQuery noch zusätzliche CSS-Klassen erforderlich!
Der Schlüssel besteht darin,
stretched-link
den Text in der Zelle zu verwenden und<tr>
als enthaltenden Block zu definieren.Sie können den enthaltenen Block auf verschiedene Arten definieren, indem Sie beispielsweise den
transform
Wert nicht auf keinen Wert setzen (wie im obigen Beispiel).Weitere Informationen finden Sie in der Bootstrap-Dokumentation für
stretched-link
.quelle
scope="row"
? Ich verwende keinen Bereich und die Zeile verhält sich immer noch als Link.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 :-)tr
Tag zurückzuführen, das unter den Browsern nicht als Regeln für den enthaltenen Block erkannt wird ... stackoverflow.com/questions/61342248/…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.
Dann zielen Sie in Ihrer jQuery einfach auf ein Element mit diesem Attribut:
Und vergessen Sie nicht, Ihr CSS zu stylen:
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.
quelle
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.
Verwendungszweck
Über Datenattribute
Fügen Sie einem oder Element eine Klasse
.rowlink
und 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:
quelle
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 ohneJavaScript/jQuery
Erfordernis: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).
quelle
<tr>
Elemente<a>
als untergeordnetes Element kein Element haben können . Nur<td>
und<th>
sind gültige Kinder. Siehe: stackoverflow.com/questions/12634715/…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.
quelle
Hier ist eine Möglichkeit, ein transparentes A-Element über die Tabellenzeilen zu setzen. Vorteile sind:
Nachteile:
Der Tisch bleibt wie er ist:
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:
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/
quelle
onmouseover
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
jQuery
Sie können dasselbe Prinzip anwenden, um jedem Tag die Schaltflächenrolle hinzuzufügen.
quelle
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:
Das CSS
Und das CSS:
Die jQuery
Und schließlich die jQuery, die die Magie möglich macht:
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.
quelle
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.
Beispiel hier arbeiten
quelle
Eine weitere Option unter Verwendung eines
<a>
, CSS Positionen und einige jQuery oder JS :HTML:
CSS:
Dann müssen Sie dem eine Breite geben, zum Beispiel mit jQuery:
quelle
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
CSS:
quelle
Ich würde es vorziehen,
onclick=""
Attribut zu verwenden , da es für Neulinge einfach zu verwenden und zu verstehen istquelle
Hier ist eine einfache Lösung ..
quelle
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.
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.
quelle
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:
quelle
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.
quelle
Ich habe viel Zeit investiert, um dieses Problem zu lösen.
Es gibt 3 Ansätze:
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.
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 :
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.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.quelle
Hier ist ein anderer Weg ...
Der HTML:
Die jQuery:
quelle
Ersetzen Sie # durch die URL, um
tabindex="0"
jedes Element fokussierbar zu machenquelle
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";})
quelle
Warum sollten wir keine "div" -Tags verwenden?
quelle