Nie możesz tego zrobić. Jest to nieprawidłowy HTML. Nie można umieścić <a> pomiędzy <tbody> a <tr>. Spróbuj zamiast tego:

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

Kiedy pracujesz nad tym, chcesz użyć JavaScript, aby przypisać obsługę kliknięć poza HTML.

Możesz umieścić kotwicę wewnątrz każdego <td>, Tak:

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

Możesz użyć display:block; na kotwicach, aby kliknąć cały wiersz.

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

Przykład jsFiddle tutaj.

Jest to prawdopodobnie tak optymalne, jak masz zamiar go dostać, chyba że uciekniesz się do JavaScript.

Tak, ale nie ze standardowymi elementami <table>. Jeśli używasz właściwości stylu display: table, możesz. Tutaj i tutaj Oto kilka skrzypiec do zademonstrowania.

Ten kod powinien zadziałać:

.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 class="table">
  <div class="row">
    <div class="cell">
      1.1
    </div>
    <div class="cell">
      1.2
    </div>
    <div class="cell">
      1.3
    </div>
  </div>

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

Zauważ, że role aria są używane w celu zapewnienia właściwej dostępności, ponieważ standardowe elementy <table> nie są używane. Może być konieczne dodanie dodatkowych ról, takich jak role="columnheader", jeśli dotyczy. Dowiedz się więcej w poniższym przewodniku tutaj.

Możesz użyć tego komponentu bootstrap:

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

Jasny Bootstrap

Brakujące komponenty Twojego ulubionego frameworka front-end.

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

Użycie

Poprzez atrybuty danych

Dodaj klasę .rowlink i atrybut data-link="row" do elementu <table> lub <tbody>. Dla innych opcji Dołącz nazwę Do data -, jak w data-target="a.mainlink" komórka może być wykluczona przez dodanie klasy .rowlink-skip do <td>.

Przez JavaScript

Wywołanie maski wejścia przez javascript:

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

Możesz użyć metody onclick javascript w tr i uczynić ją klikalną, również jeśli chcesz zbudować swój link ze względu na pewne szczegóły możesz zadeklarować funkcję w javascript i wywołać ją w onclick, przekazując pewne wartości.

Oto sposób na umieszczenie przezroczystego elementu A nad wierszami tabeli. Zalety:

• jest rzeczywistym elementem łącza: po najechaniu kursorem zmienia wskaźnik, pokazuje link docelowy na pasku stanu, może być nawigowany klawiaturą, może być otwarty w nowej karcie lub oknie, adres URL może być skopiowany, itp {]}
• tabela wygląda tak samo jak bez dodanego linku
• Brak zmian w samym kodzie tabeli

Wady:

• Rozmiar elementu A musi być ustawiony w skrypcie, zarówno podczas tworzenia i po wszelkich zmianach rozmiaru wiersza, który obejmuje (w przeciwnym razie można to zrobić bez JavaScript w ogóle, co jest nadal możliwe, jeśli rozmiar tabeli jest również ustawiony w HTML lub CSS)

Tabela pozostaje taka jak jest:

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

Dodaj linki (dla każdego wiersza) poprzez Jquery JavaScript, wstawiając element A do każdej pierwszej kolumny i ustawiając potrzebne właściwości:

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

Ustawienie szerokości i wysokości może być trudne, jeśli używa się wielu paddingów i marginesów, ale ogólnie kilka piksele wyłączone nie powinny mieć znaczenia.

Demo na żywo tutaj: http://jsfiddle.net/qo0dx0oo w Firefoksie, ale nie IE czy Chrome, tam link jest źle ustawiony)

Poprawiono dla Chrome i IE (nadal działa również w FF): http://jsfiddle.net/qo0dx0oo/2/

Znacznie bardziej elastycznym rozwiązaniem jest targetowanie wszystkiego z atrybutem data-href. To było można ponownie użyć kodu łatwo w różnych miejscach.

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

Następnie w jQuery po prostu cel dowolny element z tym atrybutem:

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

I nie zapomnij stylizować swojego css:

[data-href] {
    cursor: pointer;
}

Teraz możesz dodać atrybut data-href do dowolnego elementu i będzie działać. Kiedy piszę takie fragmenty, Lubię, aby były elastyczne. Możesz dodać do tego rozwiązanie vanilla js, jeśli masz jeden.

Inna opcja za pomocą <a>, pozycji CSS i niektórych jQuery lub 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;
}

Następnie należy podać szerokość a, używając na przykład jQuery:

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

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

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

Poniższy kod sprawi, że cała tabela będzie klikalna. Kliknięcie łącza w tym przykładzie spowoduje wyświetlenie łącza w oknie dialogowym alertu zamiast podążania za łączem.

HTML:

Poniżej znajduje się kod HTML w powyższym przykładzie:

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

CSS

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

JQuery

I na koniec jQuery, które sprawia, że magia się dzieje:

    $(document).ready(function() {

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

});

To, co robi, gdy wiersz jest kliknięty, wyszukiwanie jest wykonywane dla href = "" Jeśli zostanie znaleziony, lokalizacja okna zostanie ustawiona na ten href.

Wiem, że ktoś napisał już prawie to samo, jednak mój sposób jest poprawny (div nie może być dzieckiem A) , a także lepiej używać klas.

Możesz naśladować tabelę za pomocą CSS i uczynić element a wierszem

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

Istnieje dobry sposób, aby technicznie zrobić to za pomocą znacznika <a> wewnątrz <tr>, który może być niepoprawny semantycznie( może ostrzegać przeglądarkę), ale będzie działał bez JavaScript/jQuery wymagane:

<!-- 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: zauważ, że sztuczka polega na umieszczeniu znacznika <a> jako ostatniego elementu, w przeciwnym razie spróbuje on zająć miejsce pierwszej <td> komórki.

PPS: teraz cały wiersz będzie klikalny i możesz użyć tego linku, aby otworzyć również w nowej karcie (Ctrl/CMD+kliknięcie)

Możesz dodać rolę przycisku do wiersza tabeli, a Bootstrap zmieni kursor bez żadnych zmian css. Postanowiłem użyć tej roli jako sposobu na łatwe do każdego wiersza klikalne z bardzo mało kodu.

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

Możesz zastosować tę samą zasadę, aby dodać rolę przycisku do dowolnego tagu.

Możesz nadać wierszowi id, np.

<tr id="special"> ... </tr>

A następnie użyj jquery, aby powiedzieć coś w stylu:

$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})

Bardzo łatwa opcja (działa również z 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>

Exemple działa tutaj

Przyjęta odpowiedź jest świetna, ale proponuję małą alternatywę, jeśli nie chcesz powtarzać adresu url na każdym tr. Więc umieszczasz adres url lub href w tabeli data-url, a nie 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);
    });
});

Jest to również dobre, ponieważ nie musisz dodawać atrybutu click data do każdego tr. Inną dobrą rzeczą jest to, że nie używamy klasy do wyzwalania kliknięcia, ponieważ klasy powinny być używane tylko do stylizacji.

Jest inny sposób...

HTML:

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

JQuery:

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

      });

});

Dlaczego nie powinniśmy używać znaczników "div"....

<div>

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

</div>