Ich kann meine Tabellenzeile nicht als Link zu etwas festlegen. Ich kann nur CSS und HTML verwenden. Ich habe verschiedene Dinge ausprobiert, von Div in Reihe bis zu etwas anderem, aber ich kann es immer noch nicht zum Laufen bringen.

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:

Html

<tr data-href="site.com/whatever">

jQuery

$('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)

Bearbeiten

Einverstanden mit Matt Kantor unter Verwendung von Daten attr. Antwort oben bearbeitet

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 onClickAttribut des TRElements JavaScript zuzuweisen .

Wenn Sie kein JavaScript verwenden können, müssen Sie einen Trick verwenden:

1. Fügen Sie jeder TDZeile derselben Zeile denselben Link hinzu (der Link muss das äußerste Element in der Zelle sein).

2. 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 onclickEreignis 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 ctrlKeywird von PCs und metaKeyMacs 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

http://jsfiddle.net/vlastislavnovak/oaqo2kgs/

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>

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

Dies erspart Ihnen das Duplizieren des Links im tr - fischen Sie ihn einfach aus dem ersten a heraus.

$(".link-first-found").click(function() {
 var href;
href = $(this).find("a").attr("href");
if (href !== "") {
return document.location = href;
}
});

//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 display: table;, und dass sie nicht über die Tastatur ausgewählt werden können oder keinen Statustext haben. 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.

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.

Danke dafür. Sie können das Hover-Symbol ändern, indem Sie der Zeile eine CSS-Klasse zuweisen:

<tr class="pointer" onclick="document.location = 'links.html';">

und das CSS sieht aus wie:

<style>
    .pointer { cursor: pointer; }
</style>

Können Sie der Zeile ein A-Tag hinzufügen?

<tr><td>
<a href="./link.htm"></a>
</td></tr>

Fragen Sie das?