вы не можете этого сделать. Это недопустимый HTML. Вы не можете поставить <a> между a <tbody> и <tr>. Попробуйте вместо этого:

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

когда вы работаете до него, вы хотели бы использовать JavaScript, чтобы назначить обработчик щелчка за пределами HTML.

вы можете включить якорь внутри каждого <td>, например:

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

затем вы могли бы использовать display:block; на якорях, чтобы сделать полную строку кликабельной.

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

пример jsFiddle здесь.

это, вероятно, так же оптимально, как вы собираетесь получить его, если вы не прибегаете к JavaScript.

да, но не со стандартным <table> элементы. Если вы используете display: table свойства стиля, вы можете. здесь и здесь некоторые скрипки, чтобы продемонстрировать.

этот код должен делать трюк:

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

обратите внимание, что роли aria используются для обеспечения надлежащего доступа, так как стандарт <table> элементы не используются. Возможно, Вам потребуется добавить дополнительные роли, такие как role="columnheader" если это применимо. Узнайте больше в следующем руководстве здесь.

вы можете использовать этот компонент bootstrap:

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

Ясный Бутстрэп

недостающие компоненты для вашего любимого интерфейсного фреймворка.

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

использование

через атрибуты данных

добавить класс .rowlink и атрибута data-link="row" до <table> или <tbody> элемент. Для других параметров добавьте имя к данным -, как в data-target="a.mainlink" ячейка может быть исключается путем добавления .rowlink-skip класс <td>.

Через JavaScript

вызов маски ввода через javascript:

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

вы можете использовать метод onclick javascript в tr и сделать его кликабельным, также если вам нужно построить свою ссылку из-за некоторых деталей, вы можете объявить функцию в javascript и вызвать ее в onclick, передав некоторые значения.

вот способ, поставив прозрачный элемент A над строками таблицы. Преимущества:

• является реальным элементом ссылки: при наведении указателя изменения, показывает целевую ссылку в строке состояния, можно перемещаться по клавиатуре, может быть открыт в новой вкладке или окне, URL-адрес может быть скопирован и т. д
• таблица выглядит так же, как и без ссылки добавил
• никаких изменений в таблице код

недостатки:

• размер элемента A должен быть установлен в скрипте, как при создании, так и после любых изменений размера строки, которую он охватывает (в противном случае это может быть сделано без JavaScript вообще, что все еще возможно, если размер таблицы также установлен в HTML или CSS)

таблица остается как есть:

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

добавьте ссылки (для каждой строки) через jQuery JavaScript, вставив элемент A в каждый первый столбец и установив необходимые свойства:

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

установка ширины и высоты может быть сложно, если используется много отступов и полей, но в целом несколько пикселей не должны даже иметь значения.

демо здесь:http://jsfiddle.net/qo0dx0oo/ (работает в Firefox, но не IE или Chrome, там ссылка расположена неправильно)

исправлено для Chrome и IE (все еще работает в FF тоже):http://jsfiddle.net/qo0dx0oo/2/

гораздо более гибким решением является таргетинг на что-либо с атрибутом data-href. Это было вы можете использовать код легко в разных местах.

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

затем в вашем jQuery просто нацелитесь на любой элемент с этим атрибутом:

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

и не забудьте создать свой css:

[data-href] {
    cursor: pointer;
}

Теперь вы можете добавить атрибут data-href к любому элементу, и он будет работать. Когда я пишу такие фрагменты, мне нравится, чтобы они были гибкими. Не стесняйтесь добавлять ваниль js решение этой проблемы, если у вас есть один.

другой вариант С помощью <a>, позиции CSS и некоторые jQuery или 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;
}

тогда вам нужно дать ширину, используя, например, jQuery:

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

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

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

этот код ниже сделает всю вашу таблицу кликабельной. Щелчок по ссылкам в этом примере покажет ссылку в диалоговом окне предупреждения, а не по ссылке.

HTML:

вот HTML за приведенным выше примером:

    <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

и 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

и, наконец, jQuery, который делает магию бывает:

    $(document).ready(function() {

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

});

что он делает, когда строка нажата, поиск выполняется для href, принадлежащего якорю. Если он найден, расположение окна устанавливается на эту href.

Я знаю, что кто-то уже написал почти то же самое, однако мой путь-это правильный путь (div не может быть ребенком A), а также лучше использовать классы.

вы можете имитировать таблицу с помощью CSS и сделать элемент a строкой

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

есть хороший способ технически сделать это с <a> бирка внутри <tr>, что может быть семантически неверно (может дать вам предупреждение браузера), но будет работать с no JavaScript/jQuery требуется:

<!-- 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: обратите внимание на трюк здесь, чтобы положить <a> тег, как последний элемент, в противном случае он будет пытаться занять место первого <td> ячейки.

PPS: теперь вся ваша строка будет кликабельна, и вы можете использовать эту ссылку, чтобы открыть ее в новой вкладке (Ctrl / CMD + click)

вы можете добавить роль кнопки в строку таблицы, и Bootstrap изменит курсор без каких-либо изменений css. Я решил использовать эту роль как способ легко сделать любую строку кликабельной с очень небольшим кодом.

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

Вы можете применить этот же принцип, чтобы добавить роль кнопки к любому тегу.

вы можете дать строке идентификатор, например

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

а затем использовать jquery, чтобы сказать что-то вроде:

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

очень простой вариант(работает с угловым 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 working здесь

принятый ответ велик, но я предлагаю небольшую альтернативу, если вы не хотите повторять url-адрес на каждом tr. Таким образом, вы помещаете url или href в таблицу data-url, а не 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);
    });
});

это также хорошо, потому что вам не нужно добавлять атрибут данных click в каждый tr. Другая хорошая вещь заключается в том, что мы не используем класс для запуска щелчка, поскольку классы должны действительно использоваться только для стилизации.

вот еще один способ...

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

      });

});

почему мы не должны использовать теги "div"....

<div>

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

</div>