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

438

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

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>
user1038814
источник
2
JavaScript может быть лучше для этого
Джон Конде
1
Он использует бутстрап, поэтому я думаю, что он сможет это сделать :)
Ахмед Масуд
Как насчет размещения прозрачного элемента перед строкой? Таким образом, он будет иметь все свойства реальной ссылки (строка состояния, средний щелчок и т. Д.), А также не изменит внешний вид таблицы (если это необходимо).
Давид Балажич
1
Дубликат html - строка таблицы в виде ссылки
Джозеф Холстен

Ответы:

569

Примечание автора 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.

Ахмед Масуд
источник
105
Вы можете также изменить курсор с помощью css: tr.clickableRow {cursor: pointer; }
Уинстон Коцан
78
Просто хотел добавить, что вы не должны использовать hrefатрибут для a tr, так как это недопустимый атрибут для этого элемента. Вместо этого используйте атрибуты данных: data-url="{linkurl}"и в коде js:$(this).data('url')
Максим Ви.
12
Вы можете избежать использования класса в каждой строке, и украсить стол с именем класса clickable_row(CamelCase против стандартов HTML и должна быть в нижнем регистре (я имел проблемы с кросс - браузером несколько раз с этим)) , а затем JQuery является $('.clickable_row tr').click(function ...Но на самом деле вы должны использовать data-для хранения данных, а не hrefтак как это спецификация для пользовательских данных. data-urlи JQuery будет иметь доступ к нему, как$(this).data(url);
Петр Кула
3
К вашему сведению: Если вы можете, вы должны оставить ссылку где-то в tr для людей, у которых отключен Javascript.
hitautodestruct
47
Не большой поклонник этого решения, потому что пользователи не видят URL-адрес ссылки в нижней части браузера при наведении курсора и, что более важно, не могут щелкнуть колесо по ссылке, чтобы открыть ее на новой вкладке. Вставка aтега display: block;внутри каждой ячейки немного раздражает, но кажется наиболее подходящим способом решения этой проблемы.
Максим Россини
222

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

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

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

[data-href] { cursor: pointer; }

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

davidfurber
источник
3
@ Aquillo ОП конкретно заявляет, что он / она использует бутстрап. так что решение jQuery будет лучше в рамках
Ахмед Масуд
39
@AhmedMasud В этом случае да. Хотя для любого будущего читателя простой JS может быть лучшим решением. Поскольку в этом и заключается цель Stackoverflow, я все же считаю свой комментарий правильным.
Менно
3
Разделение поведения и разметки, безусловно, предпочтительнее. Во всяком случае, я бы сказал, что href не является допустимым атрибутом tr. Его следует заменить на data-href и заменить $ (this) .attr на $ (this) .data.
Давидфурбер
1
Или вы можете сделать так, чтобы подход привязки событий класса ".clickableRow" выглядел первым <a>внутри строки, по которой щелкали. (это также изящно
ухудшилось
3
Если вы используете синтаксис ES6, вы можете выполнить щелчок по ссылке следующим образом:onClick={() => window.open('https://stackoverflow.com/', '_blank')}
Луи Бертончин
186

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

dsgriffin
источник
11
Это лучшее решение, нет jquery, нет javascript, только CSS, т.е. моя ссылка может отличаться от href, с несколькими параметрами, такими как <a4j: commandLink />, поэтому я сохраняю это и изменяю только стиль. Большое спасибо.
TiyebM
4
@daniel хороший ответ, но если ячейка расширяется вниз, она не работает должным образом, как это jsfiddle.net/RFFy9/253
midstack
4
Большой! Это решение позволяет открыть ссылку в новой вкладке, если пользователь хочет. Но пустые столбцы не будут иметь ссылок.
Игнасио Перес
9
@AnnaRouben Я собираюсь не согласиться: наличие нескольких похожих ссылок является очень небольшим недостатком по сравнению с преимуществами (работает без JS, программа чтения с экрана может прочитать, куда ведет ссылка, может щелкнуть по клавише Ctrl, чтобы открыть ее на новой вкладке. ..) Решения Pure-HTML работают почти всегда лучше в вспомогательном программном обеспечении, чем решения JS.
JJJ
6
Мне нравится это решение, потому что оно доступно. Пользователи могут переходить по ссылкам, плюс вы можете открывать ссылки в новых вкладках. То, что я сделал в своем приложении, помещено tabindex="-1"на все <td>ссылки, кроме первой , поэтому пользовательские вкладки строка за строкой, а не ячейка за ячейкой. Кроме того, вы все равно можете выделить / обвести всю строку, если хотите, используя :focus-withinпсевдокласс CSS.
Джонатан
90

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

Тревин Эйвери
источник
13
Теперь попробуйте применить плагин dataTables к этому! :)
Афонсу Гомес
7
Это правильный ответ IMHO, потому что он сохраняет все инструменты пользовательского агента, связанные со ссылками: поиск (например, /ключ в Firefox), навигация ( tabключ), Копировать расположение ссылки, Открыть в новой вкладке / окне и т. Д. Даже для доступных / специальных нужны браузеры. Моя единственная придирка в том, что я не буду вкладывать <div>внутрь <a>, так что клетки лучше размечать как <span>.
Тобиа
Применение сторонних плагинов и библиотек к таким таблицам CSS может потребовать немного больше работы, но обычно это копирование, вставка и замена. Например, я просто продублировал собственный Bootstrap _tables.scssи несколько других случайных фрагментов, заменив все вхождения элементов таблицы выбранными классами CSS (которые просто совпадают с элементами: th.th) Не так много работы по сравнению с преимуществами, на самом деле ,
Тобиа
2
Хороший ответ, но это только решение, если таблица была просто использована для правильного выравнивания (что имеет место во многих ситуациях!). Для табличных данных семантика <table>существует по причине. Но это все еще превосходит любое решение javascript :)
Мартен
Хотя это очень умный обходной путь, это просто так. На самом деле это не таблица, и, как упоминает автор, это создаст проблемы с доступностью. Это очень вероятно вызовет проблемы с другими вещами, которые ожидают стол, но получают тот.
Тайсон Гибби
26

Достигается с помощью стандартного 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 .

Кришна Гупта
источник
1
Этот ответ заслуживает большего голосования. Нет JavaScript вообще. И для чего это scope="row"? Я не использую область действия, и строка все еще ведет себя как ссылка.
Кристофер
@ChristhoferNatalius спасибо! Мой оригинальный ответ не содержал scope="row"- пожалуйста, проверьте историю, если вы хотите увидеть, что еще, возможно, было отредактировано. Однако я не отменил изменения, так как фрагмент кода, кажется, работает (как и оригинал), и у меня не было возможности полностью протестировать новый код :-)
Кришна Гупта
Недостатком этого является то, что ссылка будет сверху столбцов, вы не сможете скопировать текст, а атрибут title в td не будет отображаться при наведении мышью. Так что, к сожалению, я должен вернуться к старому, поставить ссылку только на один столбец.
Кристофер Наталиус
3
Мне понравилось это решение, но, к сожалению, оно не кросс-браузерное (Chrome / Firefox в порядке, но не Safari). Проблема связана с trтегом, который не распознается в качестве правил для содержащего блока в браузерах ... stackoverflow.com/questions/61342248/…
pom421
Да, похоже, что это нарушает ссылки на таблицы в Safari - поведение при наведении полностью нарушается. Этот комментарий к # 28608, кажется, указывает на то, что невозможно получить желаемое поведение для таблиц с stretched-link.
Джо Лисс
17

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

AbdelElrafa
источник
хорошая работа с css
Амирхосейн Тармаст
Мое любимое решение. Молодцы 👍🏽
MFrazier
7

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

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()
phlegx
источник
6

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

Ронен
источник
Разве это не то же самое, что мой ответ ?
Давид Балажич
Хотя этот ответ выглядит идеально, на самом деле он не работает, потому что <tr>элементы не могут иметь <a>дочерний элемент. Только <td>и <th>действительны дети. Смотрите: stackoverflow.com/questions/12634715/…
funkybunky
5

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

Анаит Серобян
источник
5

Вот способ размещения прозрачного элемента 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/

Давид Балажич
источник
2
Умное решение. Я обнаружил, что создание элемента лениво, только после перемещения строки, принесло огромный прирост производительности для больших таблиц.
Леви
1
@levi Можете ли вы дать отзыв о том, как это лениво загрузить?
Подсознательный хэш
@KemalEmin Я бы предположил, что он будет использовать Javascript'sonmouseover
Брэд
5

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

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

Тодд Скелтон
источник
вау, это на самом деле работает с ui-sref вместо data-href без кода jquery. нужно просто поменять курсор на палец.
nurp
это сработало безупречно, благодаря тонне
Ашиш Банерджи
5

Вот простое решение ..

<tr style='cursor: pointer; cursor: hand;' onclick="window.location='google.com';"></tr>
Murad
источник
4

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

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.

Айдан Алейдин
источник
4

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

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

Венделл Перейра
источник
1
Конечно, это правильный ответ. Другие безумно сложны для такой простой вещи. Если вы хотите изменить указатель мыши, вы можете добавить tr: hover {cursor: pointer; } к вашему классу CSS
Том Клоуз
1
@TomClose В зависимости от того, что вы хотите, чтобы щелчок строки выполнялся, это может быть проблематично, например, навигация не будет работать нормально - нет щелчков при открытии в новой вкладке / окне, нет указателя мыши, чтобы увидеть пункт назначения и т. Д.
NetMage
3

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

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

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

 <tr onclick="window.location='any-page.php'">
    <td>UserName</td>
    <td>Email</td>
    <td>Address</td>
</tr>
Али Раза
источник
2

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

Томас Уильямс
источник
2

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

passatgt
источник
Это выглядит довольно элегантно. НО демо гугл ссылки не работает. Stackoverflow один делает. Вероятно, просто Google, как ослы, как они часто. Может быть, ссылка на Bing :-) Обслуживает их правильно. Во всяком случае, в хорошем и аккуратном решении.
BeNice
Это работает мне !! Хорошее решение. Следует отметить, что ширина a: before должна быть достаточно длинной, чтобы покрыть таблицу.
Арст
1
<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-адресом.

Кристофер Виккерс
источник
1

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

Есть 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>тега только в первом столбце, отображаемого в виде обычной ссылки, и предоставление ему роли навигации по всей строке.

gamliela
источник
0

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

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

      });

});
klewis
источник
Как мы можем открыть его в новой вкладке? @klewis
Khushbu Vaghela
0
<table>
  <tr tabindex="0" onmousedown="window.location='#';">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
</table>

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

Рахул
источник
-1

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

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

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

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

Питер Берг
источник
1
Я считаю, что вы хотите использовать класс вместо идентификатора, потому что вы, скорее всего, будете иметь несколько строк, и идентификатор должен использоваться только для одного элемента.
Программирование
-11

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

<div>

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

</div>
Рамеш Дж
источник
1
Вы должны улучшить свой ответ с помощью дисплея css: таблица
m1crdy
Улучшите ответ, добавив CSS
Prathamesh More