Antworten:
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
Ich habe mir eine benutzerdefinierte Abfragefunktion gemacht:
<tr data-href="site.com/whatever">
$('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)
Einverstanden mit Matt Kantor unter Verwendung von Daten attr. Antwort oben bearbeitet
data-href
oder so.
<table class='tr_link' >
und .tr_link{cursor:pointer}
in CSS für die beste Verwendung geben.
tr[data-href] { cursor: pointer }
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>
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 */
}
Die übliche Methode besteht darin, dem onClick
Attribut des TR
Elements JavaScript zuzuweisen .
Wenn Sie kein JavaScript verwenden können, müssen Sie einen Trick verwenden:
Fügen Sie jeder TD
Zeile derselben Zeile denselben Link hinzu (der Link muss das äußerste Element in der Zelle sein).
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.
Sie können ein <td>
Element nicht mit einem <a>
Tag umschließen, aber Sie können ähnliche Funktionen ausführen, indem Sie das onclick
Ereignis 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>
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 ctrlKey
wird von PCs und metaKey
Macs 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
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>
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; } });
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
//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.
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 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.display: table;
, und dass sie nicht über die Tastatur ausgewählt werden können oder keinen Statustext haben.
Sie können die Link-TRs speziell mit dem CSS-Selektor "tr [href]" formatieren.
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.
Können Sie der Zeile ein A-Tag hinzufügen?
<tr><td>
<a href="./link.htm"></a>
</td></tr>
Fragen Sie das?