Я использую Bootstrap, и следующее не работает:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>

Примечание автора I:

Пожалуйста, посмотрите на другие ответы ниже, особенно те, которые не используют jquery.

Примечание автора II:

Сохранено для потомков, но, безусловно, неправильный подход в 2020 году. (Не был идиоматическим даже в 2017 году)

Оригинальный ответ

Вы используете Bootstrap, что означает, что вы используете jQuery: ^), поэтому один из способов сделать это:

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

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

Преимущество использования класса перед id заключается в том, что вы можете применить решение к нескольким строкам:

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

и ваша база кода не меняется. Один и тот же обработчик позаботится обо всех строках.

Другой вариант

Вы можете использовать обратные вызовы Bootstrap jQuery, как это (в document.readyобратном вызове):

$("#container").on('click-row.bs.table', function (e, row, $element) {
    window.location = $element.data('href');
});

Это имеет преимущество в том, что не сбрасывается при сортировке таблиц (что происходит с другой опцией).

Запись

Поскольку это было опубликовано, window.document.locationоно устарело (или, по крайней мере, устарело) window.location.

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

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

добавить стиль для представления указателя

[data-href] { cursor: pointer; }

Работая над этим, вы захотите использовать 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 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>

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

Достигается с помощью стандартного Bootstrap 4.3+ следующим образом - не требуется jQuery и никаких дополнительных классов CSS!

Ключ должен использовать stretched-linkтекст в ячейке и определять его <tr>как содержащий блок.

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

Вы можете определить содержащий блок по-разному, например, настройка transform значение not not none (как в примере выше).

Для получения дополнительной информации прочитайте вот документацию по Bootstrapstretched-link .

Гораздо более гибким решением является нацеливание чего-либо с помощью атрибута 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 к любому элементу, и он будет работать. Когда я пишу такие фрагменты, мне нравится, чтобы они были гибкими. Не стесняйтесь добавлять решение Vanilla JS к этому, если у вас есть.

Вы можете использовать этот компонент начальной загрузки:

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

Jasny Bootstrap

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

<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-, так как в data-target="a.mainlink"ячейке A можно исключить, добавив .rowlink-skipкласс в <td>.

Через JavaScript

Вызовите маску ввода через JavaScript:

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

Есть хороший способ сделать это технически с <a>тегом внутри <tr>, который может быть семантически неверным (может дать вам предупреждение браузера), но будет работать без 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 + клик)

Вы можете использовать javascript-метод onclick в 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/

Вы можете добавить роль кнопки в строку таблицы, и 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 style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>

Этот код ниже сделает всю вашу таблицу кликабельной. Если щелкнуть ссылки в этом примере, в диалоговом окне с предупреждением будет показана ссылка, а не ссылка.

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.

Очень простой вариант - просто использовать по щелчку, и, на мой взгляд, более корректно, потому что это разделяет представление и контроллер, и вам не нужно жестко кодировать URL или делать то, что вам нужно сделать с помощью щелчка. , Работает и с 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>

Пример работы здесь

Другой вариант с использованием <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');
    });

Я знаю, что кто-то уже написал примерно то же самое, однако мой путь - правильный (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;}

я бы предпочел использовать onclick=""атрибут, так как он прост в использовании и понятен для новичка, как

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

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

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

Одним из решений, которое не было упомянуто ранее, является использование одной ссылки в ячейке и некоторого CSS для расширения этой ссылки на ячейки:

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>

Хотя основное решение здесь великолепно, мое решение устраняет необходимость в занятиях. Все, что вам нужно сделать, это добавить атрибут data-href с URL-адресом.

Я потратил много времени, пытаясь решить эту проблему.

Есть 3 подхода:

1. Используйте JavaScript. Очевидные недостатки: невозможно открыть новую вкладку изначально, и при наведении курсора на строку в строке состояния не будет индикации, как у обычных ссылок. Доступность тоже вопрос.

2. Используйте только HTML / CSS. Это значит положить <a>вложенные под каждый <td>. Простой подход, подобный этой скрипке , не работает - потому что кликабельная поверхность не обязательно равна для каждого столбца. Это серьезная проблема UX. Кроме того, если вам нужна <button>строка, это не допустимый HTML, чтобы вкладывать его в<a> тег (хотя браузеры с этим согласны).

   Я нашел 3 других способа реализации этого подхода. Первый в порядке, два других не велики.

   а) Посмотрите на этот пример :

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

   Это работает, но из-за несоответствий между Chrome и Firefox требуется специальный взлом для браузера, чтобы преодолеть различия. Кроме того, Chrome всегда выравнивает содержимое ячейки сверху, что может вызвать проблемы с длинными текстами, особенно если речь идет о разной высоте строки.

   б) Настройка <td>на { display: contents; }. Это приводит к 2 другим проблемам:

   b1. Если кто-то пытается напрямую <td>стилизовать тег, например, установить его { width: 20px; }, нам нужно как-то передать этот стиль <a>тегу. Нам нужно немного магии, чтобы сделать это, возможно, больше магии, чем в альтернативе Javascript.

   Би 2. { display: contents; }все еще экспериментальный; в частности это не поддерживается на Edge.

   в) Настройка <td>на { height: --some-fixed-value; }. Это просто недостаточно гибко.

3. Последний подход, о котором я рекомендую серьезно подумать, это вообще не использовать кликабельные строки . Кликабельные строки не очень удобны в UX: визуально пометить их как кликабельные нелегко, и возникают проблемы, когда в строках, например, кнопках, можно нажимать несколько частей. Таким образом, жизнеспособной альтернативой может быть наличие <a>тега только в первом столбце, отображаемого в виде обычной ссылки, и предоставление ему роли навигации по всей строке.

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

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

      });

});

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

Замените # на url, tabindex="0"делает любой элемент фокусируемым

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

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

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

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

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

<div>

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

</div>