Я использую Bootstrap, и следующее не работает:
<tbody>
<a href="#">
<tr>
<td>Blah Blah</td>
<td>1234567</td>
<td>£158,000</td>
</tr>
</a>
</tbody>
html
html-table
bootstrap-4
user1038814
источник
источник
Ответы:
Примечание автора I:
Пожалуйста, посмотрите на другие ответы ниже, особенно те, которые не используют jquery.
Примечание автора II:
Сохранено для потомков, но, безусловно, неправильный подход в 2020 году. (Не был идиоматическим даже в 2017 году)
Оригинальный ответ
Вы используете Bootstrap, что означает, что вы используете jQuery: ^), поэтому один из способов сделать это:
Конечно, вам не нужно использовать href или переключать местоположения, вы можете делать все что угодно в функции обработчика кликов. Читайте дальше
jQuery
и как писать обработчики;Преимущество использования класса перед id заключается в том, что вы можете применить решение к нескольким строкам:
и ваша база кода не меняется. Один и тот же обработчик позаботится обо всех строках.
Другой вариант
Вы можете использовать обратные вызовы Bootstrap jQuery, как это (в
document.ready
обратном вызове):Это имеет преимущество в том, что не сбрасывается при сортировке таблиц (что происходит с другой опцией).
Запись
Поскольку это было опубликовано,
window.document.location
оно устарело (или, по крайней мере, устарело)window.location
.источник
href
атрибут для atr
, так как это недопустимый атрибут для этого элемента. Вместо этого используйте атрибуты данных:data-url="{linkurl}"
и в коде js:$(this).data('url')
clickable_row
(CamelCase против стандартов HTML и должна быть в нижнем регистре (я имел проблемы с кросс - браузером несколько раз с этим)) , а затем JQuery является$('.clickable_row tr').click(function ...
Но на самом деле вы должны использоватьdata-
для хранения данных, а неhref
так как это спецификация для пользовательских данных.data-url
и JQuery будет иметь доступ к нему, как$(this).data(url);
a
тегаdisplay: block;
внутри каждой ячейки немного раздражает, но кажется наиболее подходящим способом решения этой проблемы.Вы не можете сделать это. Это неверный HTML. Вы не можете поставить
<a>
между<tbody>
и<tr>
. Попробуйте это вместо:добавить стиль для представления указателя
Работая над этим, вы захотите использовать JavaScript, чтобы назначить обработчик кликов за пределами HTML.
источник
<a>
внутри строки, по которой щелкали. (это также изящноonClick={() => window.open('https://stackoverflow.com/', '_blank')}
Вы можете включить якорь внутри каждого
<td>
, например, так:Затем вы можете использовать
display:block;
привязки, чтобы сделать весь ряд кликабельным.Пример jsFiddle здесь.
Это, вероятно, примерно так же оптимально, как вы собираетесь получить, если вы не прибегаете к JavaScript.
источник
tabindex="-1"
на все<td>
ссылки, кроме первой , поэтому пользовательские вкладки строка за строкой, а не ячейка за ячейкой. Кроме того, вы все равно можете выделить / обвести всю строку, если хотите, используя:focus-within
псевдокласс CSS.Строка связанной таблицы возможна, но не со стандартными
<table>
элементами. Вы можете сделать это, используяdisplay: table
свойства стиля. Здесь и здесь есть несколько скрипок для демонстрации.Этот код должен сделать свое дело:
Обратите внимание, что роли ARIA необходимы для обеспечения надлежащей доступности, поскольку стандартные
<table>
элементы не используются. Возможно, вам придется добавить дополнительные роли, как,role="columnheader"
если это применимо. Узнайте больше в руководстве здесь.источник
/
ключ в Firefox), навигация (tab
ключ), Копировать расположение ссылки, Открыть в новой вкладке / окне и т. Д. Даже для доступных / специальных нужны браузеры. Моя единственная придирка в том, что я не буду вкладывать<div>
внутрь<a>
, так что клетки лучше размечать как<span>
._tables.scss
и несколько других случайных фрагментов, заменив все вхождения элементов таблицы выбранными классами CSS (которые просто совпадают с элементами:th
→.th
) Не так много работы по сравнению с преимуществами, на самом деле ,<table>
существует по причине. Но это все еще превосходит любое решение javascript :)Достигается с помощью стандартного Bootstrap 4.3+ следующим образом - не требуется jQuery и никаких дополнительных классов CSS!
Ключ должен использовать
stretched-link
текст в ячейке и определять его<tr>
как содержащий блок.Вы можете определить содержащий блок по-разному, например, настройка
transform
значение not not none (как в примере выше).Для получения дополнительной информации прочитайте вот документацию по Bootstrap
stretched-link
.источник
scope="row"
? Я не использую область действия, и строка все еще ведет себя как ссылка.scope="row"
- пожалуйста, проверьте историю, если вы хотите увидеть, что еще, возможно, было отредактировано. Однако я не отменил изменения, так как фрагмент кода, кажется, работает (как и оригинал), и у меня не было возможности полностью протестировать новый код :-)tr
тегом, который не распознается в качестве правил для содержащего блока в браузерах ... stackoverflow.com/questions/61342248/…stretched-link
.Гораздо более гибким решением является нацеливание чего-либо с помощью атрибута data-href. Это можно было легко использовать код в разных местах.
Затем в вашем jQuery просто укажите любой элемент с этим атрибутом:
И не забудьте оформить свой CSS:
Теперь вы можете добавить атрибут data-href к любому элементу, и он будет работать. Когда я пишу такие фрагменты, мне нравится, чтобы они были гибкими. Не стесняйтесь добавлять решение Vanilla JS к этому, если у вас есть.
источник
Вы можете использовать этот компонент начальной загрузки:
http://jasny.github.io/bootstrap/javascript/#rowlink
Jasny Bootstrap
Недостающие компоненты для вашего любимого интерфейса.
Применение
Через атрибуты данных
Добавьте класс
.rowlink
и атрибутdata-link="row"
к элементу<table>
или<tbody>
. Для других опций добавьте имя к data-, так как вdata-target="a.mainlink"
ячейке A можно исключить, добавив.rowlink-skip
класс в<td>
.Через JavaScript
Вызовите маску ввода через JavaScript:
источник
Есть хороший способ сделать это технически с
<a>
тегом внутри<tr>
, который может быть семантически неверным (может дать вам предупреждение браузера), но будет работать безJavaScript/jQuery
необходимости:PS: обратите внимание на хитрость в том, чтобы поместить
<a>
тег как последний элемент, иначе он попытается занять место в первой<td>
ячейке.PPS: теперь вся ваша строка будет кликабельной, и вы можете использовать эту ссылку, чтобы открыть ее и на новой вкладке (Ctrl / CMD + клик)
источник
<tr>
элементы не могут иметь<a>
дочерний элемент. Только<td>
и<th>
действительны дети. Смотрите: stackoverflow.com/questions/12634715/…Вы можете использовать javascript-метод onclick в tr и сделать его кликабельным, также если вам нужно создать ссылку из-за некоторых деталей, вы можете объявить функцию в javascript и вызвать ее в onclick, передавая некоторые значения.
источник
Вот способ размещения прозрачного элемента A над строками таблицы. Преимущества:
Недостатки:
Стол остается как есть:
Добавьте ссылки (для каждой строки) с помощью jQuery JavaScript, вставив элемент A в каждый первый столбец и установив необходимые свойства:
Настройка ширины и высоты может быть сложной, если используется много отступов и полей, но, как правило, несколько пикселей не должны иметь значения.
Демонстрационная версия здесь: http://jsfiddle.net/qo0dx0oo/ (работает в Firefox, но не в IE или Chrome, там ссылка расположена неправильно)
Исправлено для Chrome и IE (все еще работает в FF): http://jsfiddle.net/qo0dx0oo/2/
источник
onmouseover
Вы можете добавить роль кнопки в строку таблицы, и Bootstrap изменит курсор без каких-либо изменений CSS. Я решил использовать эту роль как способ легко сделать любую строку кликабельной с очень небольшим количеством кода.
Html
JQuery
Вы можете применить этот же принцип, чтобы добавить роль кнопки к любому тегу.
источник
Вот простое решение ..
источник
Этот код ниже сделает всю вашу таблицу кликабельной. Если щелкнуть ссылки в этом примере, в диалоговом окне с предупреждением будет показана ссылка, а не ссылка.
HTML:
Вот HTML за приведенным выше примером:
CSS
И CSS:
JQuery
И, наконец, jQuery, благодаря которому происходит волшебство:
Что происходит, когда щелкают по строке, выполняется поиск href, принадлежащего привязке. Если он найден, местоположение окна устанавливается на этот href.
источник
Очень простой вариант - просто использовать по щелчку, и, на мой взгляд, более корректно, потому что это разделяет представление и контроллер, и вам не нужно жестко кодировать URL или делать то, что вам нужно сделать с помощью щелчка. , Работает и с Angular ng-click тоже.
Пример работы здесь
источник
Другой вариант с использованием
<a>
позиций CSS и некоторых jQuery или JS :HTML:
CSS:
Затем вам нужно указать ширину, используя, например, jQuery:
источник
Я знаю, что кто-то уже написал примерно то же самое, однако мой путь - правильный (div не может быть дочерним для A), а также лучше использовать классы.
Вы можете имитировать таблицу с помощью CSS и сделать элемент A строкой
CSS:
источник
я бы предпочел использовать
onclick=""
атрибут, так как он прост в использовании и понятен для новичка, какисточник
Принятый ответ великолепен, но я предлагаю небольшую альтернативу, если вы не хотите повторять URL-адрес для каждого запроса. Таким образом, вы помещаете url или href в таблицу data-url, а не в tr.
Это также хорошо, потому что вам не нужно добавлять атрибут данных клика для каждого tr. Еще одна хорошая вещь - мы не используем класс для запуска клика, поскольку классы должны использоваться только для стиля.
источник
Одним из решений, которое не было упомянуто ранее, является использование одной ссылки в ячейке и некоторого CSS для расширения этой ссылки на ячейки:
источник
Хотя основное решение здесь великолепно, мое решение устраняет необходимость в занятиях. Все, что вам нужно сделать, это добавить атрибут data-href с URL-адресом.
источник
Я потратил много времени, пытаясь решить эту проблему.
Есть 3 подхода:
Используйте JavaScript. Очевидные недостатки: невозможно открыть новую вкладку изначально, и при наведении курсора на строку в строке состояния не будет индикации, как у обычных ссылок. Доступность тоже вопрос.
Используйте только HTML / CSS. Это значит положить
<a>
вложенные под каждый<td>
. Простой подход, подобный этой скрипке , не работает - потому что кликабельная поверхность не обязательно равна для каждого столбца. Это серьезная проблема UX. Кроме того, если вам нужна<button>
строка, это не допустимый HTML, чтобы вкладывать его в<a>
тег (хотя браузеры с этим согласны).Я нашел 3 других способа реализации этого подхода. Первый в порядке, два других не велики.
а) Посмотрите на этот пример :
Это работает, но из-за несоответствий между Chrome и Firefox требуется специальный взлом для браузера, чтобы преодолеть различия. Кроме того, Chrome всегда выравнивает содержимое ячейки сверху, что может вызвать проблемы с длинными текстами, особенно если речь идет о разной высоте строки.
б) Настройка
<td>
на{ display: contents; }
. Это приводит к 2 другим проблемам:b1. Если кто-то пытается напрямую
<td>
стилизовать тег, например, установить его{ width: 20px; }
, нам нужно как-то передать этот стиль<a>
тегу. Нам нужно немного магии, чтобы сделать это, возможно, больше магии, чем в альтернативе Javascript.Би 2.
{ display: contents; }
все еще экспериментальный; в частности это не поддерживается на Edge.в) Настройка
<td>
на{ height: --some-fixed-value; }
. Это просто недостаточно гибко.Последний подход, о котором я рекомендую серьезно подумать, это вообще не использовать кликабельные строки . Кликабельные строки не очень удобны в UX: визуально пометить их как кликабельные нелегко, и возникают проблемы, когда в строках, например, кнопках, можно нажимать несколько частей. Таким образом, жизнеспособной альтернативой может быть наличие
<a>
тега только в первом столбце, отображаемого в виде обычной ссылки, и предоставление ему роли навигации по всей строке.источник
Вот еще один способ ...
HTML:
JQuery:
источник
Замените # на url,
tabindex="0"
делает любой элемент фокусируемымисточник
Вы можете дать строке идентификатор, например,
<tr id="special"> ... </tr>
а затем используйте jquery, чтобы сказать что-то вроде:
$('#special').onclick(function(){ window="http://urltolinkto.com/x/y/z";})
источник
Почему мы не должны использовать теги "div" ....
источник