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>

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:

<tbody>
    <tr class='clickable-row' data-href='url://'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
</tbody>


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

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 jQueryund 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:

<tbody>
    <tr class='clickable-row' data-href='url://link-for-first-row/'>
        <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
    </tr>
    <tr class='clickable-row' data-href='url://some-other-link/'>
        <td>More money</td> <td>1234567</td> <td>£800,000</td>
    </tr>
</tbody>

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.readyRü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 der Fall ist).

Hinweis

Da dies gepostet wurde, window.document.locationist die Verwendung veraltet (oder zumindest veraltet) window.location.

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:

<tr onclick="window.location='#';">
        ...
     </tr>

Stil für Zeigeransicht hinzufügen

[data-href] { cursor: pointer; }

Wenn Sie daran arbeiten, möchten Sie JavaScript verwenden, um den Klick-Handler außerhalb des HTML-Codes zuzuweisen.

Sie können in jeden einen Anker einfügen <td>, wie folgt:

<tr>
  <td><a href="#">Blah Blah</a></td>
  <td><a href="#">1234567</a></td>
  <td><a href="#">more text</a></td>
</tr>

Sie können dann display:block;die Anker verwenden, um die gesamte Zeile anklickbar zu machen.

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

Beispiel jsFiddle hier.

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

Eine verknüpfte Tabellenzeile ist möglich, jedoch nicht mit den Standardelementen <table>. Sie können dies mithilfe der display: tableStileigenschaften tun . Hier und hier sind einige Geigen zu demonstrieren.

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

<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />

<div role="grid" class="table">
  <div role="row" class="row">
    <div role="gridcell" class="cell">
      1.1
    </div>
    <div role="gridcell" class="cell">
      1.2
    </div>
    <div role="gridcell" class="cell">
      1.3
    </div>
  </div>

  <a role="row" class="row" href="#">
    <div role="gridcell" class="cell">
      2.1
    </div>
    <div role="gridcell" class="cell">
      2.2
    </div>
    <div role="gridcell" class="cell">
      2.3
    </div>
  </a>
</div>

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.

Erreicht mit Standard Bootstrap 4.3+ wie folgt - weder jQuery noch zusätzliche CSS-Klassen erforderlich!

Der Schlüssel besteht darin, stretched-linkden Text in der Zelle zu verwenden und <tr>als enthaltenden Block zu definieren.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-hover">
  <tbody>
    <tr style="transform: rotate(0);">
    <th scope="row"><a href="#" class="stretched-link">1</a></th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>

Sie können den enthaltenen Block auf verschiedene Arten definieren, indem Sie beispielsweise den transformWert nicht auf keinen Wert setzen (wie im obigen Beispiel).

Weitere Informationen finden Sie in der Bootstrap-Dokumentation für stretched-link.

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.

<tbody>
    <tr data-href="https://google.com">
        <td>Col 1</td>
        <td>Col 2</td>
    </tr>
</tbody>

Dann zielen Sie in Ihrer jQuery einfach auf ein Element mit diesem Attribut:

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

Und vergessen Sie nicht, Ihr CSS zu stylen:

[data-href] {
    cursor: pointer;
}

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.

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.

<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr><th>Name</th><th>Description</th><th>Actions</th></tr>
  </thead>
  <tbody data-link="row" class="rowlink">
    <tr><td><a href="#inputmask">Input mask</a></td><td>Input masks can be used to force the user to enter data conform a specific format.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="http://www.jasny.net/" target="_blank">jasny.net</a></td><td>Shared knowledge of Arnold Daniels aka Jasny.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
    <tr><td><a href="#rowlinkModal" data-toggle="modal">Launch modal</a></td><td>Toggle a modal via JavaScript by clicking this row.</td><td class="rowlink-skip"><a href="#">Action</a></td></tr>
  </tbody>
</table>

Verwendungszweck

Über Datenattribute

Fügen Sie einem oder Element eine Klasse .rowlinkund 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:

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

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 ohne JavaScript/jQueryErfordernis:

<!-- HTML -->
<tbody>
  <tr class="bs-table-row">
     <td>Blah Blah</td>
     <td>1234567</td>
     <td>£158,000</td>
     <a class="bs-row-link" href="/your-link-here"></a>
  </tr>
</tbody>

/* CSS */
.bs-table-row {
  position: 'relative';
}

.bs-row-link {
  position: 'absolute';
  left: 0;
  height: '36px'; // or different row height based on your requirements
  width: '100%';
  cursor: 'pointer';
}

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).

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.

Hier ist eine Möglichkeit, ein transparentes A-Element über die Tabellenzeilen zu setzen. Vorteile sind:

• ist ein echtes Linkelement: Beim Schweben ändert sich der Zeiger, zeigt den Ziellink in der Statusleiste an, kann über die Tastatur navigiert werden, kann in einem neuen Tab oder Fenster geöffnet werden, die URL kann kopiert werden usw.
• Die Tabelle sieht genauso aus wie ohne den hinzugefügten Link
• Keine Änderungen im Tabellencode

Nachteile:

• Die Größe des A-Elements muss sowohl bei der Erstellung als auch nach Änderungen an der Größe der abgedeckten Zeile in einem Skript festgelegt werden (andernfalls kann dies ohne JavaScript erfolgen, was auch dann möglich ist, wenn auch die Tabellengröße festgelegt wird in HTML oder CSS)

Der Tisch bleibt wie er ist:

<table id="tab1">
<tbody>
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
</tbody>
</table>

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:

// v1, fixed for IE and Chrome
// v0, worked on Firefox only
// width needed for adjusting the width of the A element
var mywidth=$('#tab1').width();

$('#tab1 tbody>tr>td:nth-child(1)').each(function(index){
    $(this).css('position',  'relative');// debug: .css('background-color', '#f11');
    // insert the <A> element
    var myA=$('<A>');
    $(this).append(myA);
    var myheight=$(this).height();

    myA.css({//"border":'1px solid #2dd', border for debug only
            'display': 'block',
            'left': '0',
            'top': '0',
            'position':  'absolute'
        })
        .attr('href','the link here')
        .width(mywidth)
        .height(myheight)
        ;
    });

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/

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

<table class="table table-striped table-hover">
     <tbody>
          <tr role="button" data-href="#">
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
          </tr>
     </tbody>
</table>

jQuery

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

Sie können dasselbe Prinzip anwenden, um jedem Tag die Schaltflächenrolle hinzuzufügen.

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:

    <table id="example">
    <tr>
     <th>&nbsp;</th>
     <th>Name</th>
     <th>Description</th>
     <th>Price</th>
   </tr>
   <tr>
     <td><a href="apples">Edit</a></td>
     <td>Apples</td>
     <td>Blah blah blah blah</td>
     <td>10.23</td>
   </tr>
    <tr>
     <td><a href="bananas">Edit</a></td>
     <td>Bananas</td>
     <td>Blah blah blah blah</td>
     <td>11.45</td>
   </tr>
   <tr>
     <td><a href="oranges">Edit</a></td>
     <td>Oranges</td>
     <td>Blah blah blah blah</td>
     <td>12.56</td>
   </tr>
    </table>

Das CSS

Und das CSS:

    table#example {
    border-collapse: collapse;   
}
#example tr {
    background-color: #eee;
    border-top: 1px solid #fff;
}
#example tr:hover {
    background-color: #ccc;
}
#example th {
    background-color: #fff;
}
#example th, #example td {
    padding: 3px 5px;
}
#example td:hover {
    cursor: pointer;
}

Die jQuery

Und schließlich die jQuery, die die Magie möglich macht:

    $(document).ready(function() {

    $('#example tr').click(function() {
        var href = $(this).find("a").attr("href");
        if(href) {
            window.location = href;
        }
    });

});

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.

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.

<table>
  <tr onclick="myFunction(this)">
    <td>Click to show rowIndex</td>
  </tr>
</table>

<script>
function myFunction(x) {
    alert("Row index is: " + x.rowIndex);
}
</script>

Beispiel hier arbeiten

Eine weitere Option unter Verwendung eines <a>, CSS Positionen und einige jQuery oder JS :

HTML:

<table>
<tr>
    <td>
        <span>1</span>
        <a href="#" class="rowLink"></a>
    </td>
    <td><span>2</span></td>
</tr>
</table>

CSS:

table tr td:first-child {
    position: relative;
}
a.rowLink {
    position: absolute;
    top: 0; left: 0;
    height: 30px;
}
a.rowLink:hover {
    background-color: #0679a6;
    opacity: 0.1;
}

Dann müssen Sie dem eine Breite geben, zum Beispiel mit jQuery:

    $(function () {
        var $table = $('table');
            $links = $table.find('a.rowLink');

        $(window).resize(function () {
            $links.width($table.width());
        });

        $(window).trigger('resize');
    });

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

<div class="table" style="width:100%;">
  <a href="#" class="tr">
    <span class="td">
      cell 1
    </span>
    <span class="td">
      cell 2
    </span>
  </a>
</div>

CSS:

.table{display:table;}
.tr{display:table-row;}
.td{display:table-cell;}
.tr:hover{background-color:#ccc;}

Ich würde es vorziehen, onclick=""Attribut zu verwenden , da es für Neulinge einfach zu verwenden und zu verstehen ist

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>

Hier ist eine einfache Lösung ..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

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.

<table data-click data-url="href://blah">    
    <tbody>
        <tr id ="2">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
        <tr id ="3">
            <td>Blah Blah</td> <td>1234567</td> <td>£158,000</td>
        </tr>
    </tbody>
    </table

jQuery(document).ready(function($) {
    $('[data-click] tbody tr').click(function() {
        var url = $(this).closest('table').data("url");
        var id = $(this).closest('tr').attr('id');
        window.location = url+"?id="+id);
    });
});

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.

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:

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

<table>
  <tr>
    <td><a href="https://google.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
  <tr>
    <td><a href="https://stackoverflow.com">First column</a></td>
    <td>Second column</td>
    <td>Third column</td>
  </tr>
</table>

<tbody>
    <tr data-href='www.bbc.co.uk'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
    <tr data-href='www.google.com'>
        <td>Blah Blah</td>
        <td>1234567</td>
        <td>£158,000</td>
    </tr>
</tbody>

<script>
    jQuery(document).ready(function ($) {
        $('[data-href]').click(function () {
            window.location = $(this).data("href");
        });
    });
</script>

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.

Ich habe viel Zeit investiert, um dieses Problem zu lösen.

Es gibt 3 Ansätze:

1. 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.

2. 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 :

   tr {
     height: 0;
   }
   
   td {
     height: 0;
     padding: 0;
   }
   
   /* A hack to overcome differences between Chrome and Firefox */
   @-moz-document url-prefix() {
     td {
       height: 100%;
     }
   }
   
   a {
     display: block;
     height: 100%;
   }

   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.

3. 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.

Hier ist ein anderer Weg ...

Der HTML:

<table>
<tbody>
       <tr class='clickableRow'>
       <td>Blah Blah</td>
       <td>1234567</td>
       <td>£158,000</td>
        </tr>
</tbody>
</table>

Die jQuery:

$(function() {
      $(".clickableRow").on("click", function() {
          location.href="http://google.com";

      });

});

<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

Ersetzen Sie # durch die URL, um tabindex="0"jedes Element fokussierbar zu machen

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

Warum sollten wir keine "div" -Tags verwenden?

<div>

  <a href="" >     <div>  Table row  of content here..  </div>    </a>

</div>