Как сделать целую строку в таблице, кликабельную как ссылку?

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Сохранено для потомков, но, безусловно, неправильный подход в 2019 году. (Был даже плох в 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.

Ответ 2

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

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

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

Ответ 3

Вы можете включить якорь внутри каждого <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.

Ответ 4

Строка связанной таблицы возможна, но не со стандартными элементами <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>

Ответ 5

Гораздо более гибкое решение - нацелить на что-либо атрибут 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 к этому, если оно у вас есть.

Ответ 6

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

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

Jasny Bootstrap

Отсутствующие компоненты для вашей любимой 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>

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

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

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

Через JavaScript

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

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

Ответ 7

Есть хороший способ технически сделать это с тегом <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 + click)

Ответ 8

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

Ответ 9

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

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

Недостатки:

  • размер элемента A должен быть установлен в script, как при создании, так и после любых изменений в размере строки, которую он охватывает (в противном случае это может быть сделано без 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/

Ответ 10

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

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.

Ответ 11

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

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

Ответ 12

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

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

Ответ 13

Еще одна опция , использующая <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');
    });

Ответ 14

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

Ответ 15

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

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

Ответ 16

Достигается с использованием стандартного 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>

Ответ 17

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

Ответ 18

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

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

      });

});

Ответ 19

<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-адресом в нем.

Ответ 20

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

Есть 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; }. Это приводит к двум другим проблемам:

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

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

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

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

Ответ 21

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

Ответ 22

Вы можете указать строку id, например.

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

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

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

Ответ 23

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

<div>

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

</div>