Я використовую 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>між a <tbody>і a <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значення не на значення (як у прикладі вище).

Для отримання додаткової інформації читайте тут документацію Bootstrap для stretched-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 до будь-якого елемента, і він буде працювати. Коли я пишу такі фрагменти, я люблю, щоб вони були гнучкими. Сміливо додайте до цього розчин ванілі 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-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 + клацання)

Ви можете використовувати метод 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/

Ви можете додати роль кнопки до рядка таблиці, і 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");
     });
});

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

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

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-адресу або все, що вам потрібно зробити з натисканням клацання . Він працює і з кутовим натисканням ng.

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

Ось просте рішення ..

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

Прийнята відповідь чудова, але я пропоную невелику альтернативу, якщо ви не хочете повторювати 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);
    });
});

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

   b) Установка <td>на{ display: contents; } . Це призводить до двох інших проблем:

   b1. Якщо хтось інший намагається стилізувати безпосередньо <td>тег, як, наприклад, його встановити { width: 20px; }, нам потрібно якось передати цей стиль до<a> тегу. Для цього нам потрібна якась магія, ймовірно, більше магії, ніж в альтернативі Javascript.

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